前端实现利用层级下拉框从页面表格中删选出数据

今天用前端实现一个表格数据查询，主要是两部分功能，表格渲染，表格查询

HTML布局分为上下两部分，删选栏和内容表格栏，删选栏是用 ul + li 组合的办法，做的一个层级下拉选择框，具体多少层级，根据项目需求而定，内容表格，用到的是 layui 去渲染的，直接po代码：

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
       <link rel="stylesheet" href="layui-v2.5.6/layui-v2.5.6/layui/css/layui.css" media="all">
       <title></title>
       <style>
           /* navigation style */
           body{
               background-color: #EFEFF4;
           }
#nav{
height: 39px;
background-color: #fff;
min-width:500px;
margin-left: 0px;
padding-left: 0px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);

}

#nav li{
list-style: none;
display: block;
float: left;
height: 40px;
position: relative;
z-index: 100;
}

#nav li a{
padding: 0px 10px 0px 30px;
margin: 0px 0;
line-height: 40px;
text-decoration: none;
height: 40px;
color: #000000;

}

#nav ul{
background: #f2f5f6;
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow:2px 2px 3px #ECECEC;
width:190px;
}

#nav li a{
display: block;
}
#nav ul li {
border-right:none;
border-bottom:1px solid #DDDDDD;
width:190px;
height:39px;
}
#nav ul li a {
border-right: none;
color:#6791AD;
text-shadow: 1px 1px 1px #FFF;
border-bottom:1px solid #FFFFFF;
}
#nav ul li:hover{background:#DFEEF0;}
#nav ul li:last-child { border-bottom: none;}
#nav ul li:last-child a{ border-bottom: none;}
/* Sub menus */
#nav ul{
display: none;
visibility:hidden;
position: absolute;
top: 40px;
}

/* Third-level menus */
#nav ul ul{
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
/* Fourth-level menus */
#nav ul ul ul{
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}

#nav ul li{
display: block;
visibility:visible;
}
#nav li:hover > ul{
display: block;
visibility:visible;
}
.content{
   background-color: #fff;
   padding: 5px 0;
   margin-top: 10px;
}
</style>


   </head>
   <body>
       <div id="nav">

           <li class="yahoo">
               <a href="#" οnclick="rande(resJson)">删选菜单</a>
               <ul>
                   <li>
                       <a href="#">性别 »</a>
                       <ul>
                           <li class="item"><a href="#" >男</a></li>
                           <li class="item"><a href="#" >女</a></li>
                       </ul>
                   </li>
                   <li>
                       <a href="#">职业 »</a>
                       <ul>
                           <li class="item"><a href="#" >作家</a></li>
                           <li class="item"><a href="#" >酱油</a></li>
                           <li class="item"><a href="#" >词人</a></li>
                           <li class="item"><a href="#" >诗人</a></li>
                       </ul>
                   </li>
               </ul>
           </li>

       </div>


       <div class="content">
           <table class="layui-hide" id="datatable"></table>
       </div>

       <script src="layui-v2.5.6/layui-v2.5.6/layui/layui.js"></script>

       <script type="text/javascript" src="js/jquery.min.js"></script>
       <script>
           var resJson;
           var Arr=[];
           $(document).ready(function() {
           //导航搜索框事件
               $("#nav li").hover(
                   function() {
                       $(this).children('ul').hide();
                       $(this).children('ul').slideDown('fast');
                   },
                   function() {
                       $('ul', this).slideUp('fast');
                   });


                   //渲染数据表格
                   layui.use('table', function(){
                   var table = layui.table;

                   table.render({
                   elem: '#datatable'
                   ,url:'json/table.json',
                       data:Arr
                   ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                   ,cols: [[
                   {field:'id', title: 'ID', sort: true, filter: true}
                   ,{field:'username', title: '用户名'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                   ,{field:'sex', title: '性别', sort: true, filter: true}
                   ,{field:'city', title: '城市'}
                   ,{field:'sign', title: '签名'}
                   ,{field:'classify', title: '职业', align: 'center', filter: true} //单元格内容水平居中
                   ,{field:'experience', title: '积分', sort: true, align: 'right'} //单元格内容水平居右
                   ,{field:'score', title: '评分', sort: true, align: 'right'}
                   ,{field:'wealth', title: '财富', sort: true, align: 'right'}
                   ]]
                       ,done: function (res, curr, count){
                               // debugger;
                               resJson=res.data;
                           }

                       });//end render
               });//end layui.use

});//end $(function{})


               $(".item").click(function(){
               console.log(this.innerText);
                       var myobj=eval(resJson);
                       Arr.length = 0;
                   for(var i=0;i<myobj.length;i++){
                           // console.log(myobj[i].sex);
                           if(this.innerText==myobj[i].sex){
                               console.log(myobj[i]);
                               Arr.push(myobj[i]);
                               console.log(Arr);
                               rande(Arr);
                           }
                           if(this.innerText==myobj[i].classify){
                               console.log(myobj[i]);
                               Arr.push(myobj[i]);
                               console.log(Arr);
                               rande(Arr);
                           }

                   }//end for

               });//end click

   function rande(data){
       //渲染数据表格
           layui.use('table', function(){
           var table = layui.table;

           table.render({
           elem: '#datatable'

               ,data:data
           ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
           ,cols: [[
           {field:'id', title: 'ID', sort: true, filter: true}
           ,{field:'username', title: '用户名'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
           ,{field:'sex', title: '性别', sort: true, filter: true}
           ,{field:'city', title: '城市'}
           ,{field:'sign', title: '签名'}
           ,{field:'classify', title: '职业', align: 'center', filter: true} //单元格内容水平居中
           ,{field:'experience', title: '积分', sort: true, align: 'right'} //单元格内容水平居右
           ,{field:'score', title: '评分', sort: true, align: 'right'}
           ,{field:'wealth', title: '财富', sort: true, align: 'right'}
           ]]
               ,done: function (res, curr, count){
                       // debugger;
                       a=res.data;
                       return res;

                       // window.resJson=res;
                   }

               });//end render
       });
   }
       </script>
   </body>
</html>

总结：虽然代码可能还是很 low ，但好歹感觉大体都出来了。写代码一定要逻辑清楚，并且构思好

给多个元素加点击事件的时候，不一定用获取对象，循环遍历添加点击事件，还可以用jQuery的办法（附件1）。如果是简单的处理操作，甚至可以使用行内加 onclick() 方法，但是要注意，如果使用行内的方法，那么点击时，获取的是windows对象，如果需要对其中的文本或者属性做操作，可能较难获取到（待解决）

<p οnclick=xx()> 这是一p </p>

function xx(){}

还用到了一个eval()方法，将json格式转化成数组，渲染 layui 的时候不一定从 url 链接出发，还可以用数组，添加 data 就行

附件1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
console.log(this)
});
});
</script>
</head>
<body>

<p>点击这个段落。</p >
<p>点击这个段落。</p >
<p>点击这个段落。</p >
<p>点击这个段落。</p >

</body>
</html>

啊~不说了，前端好难，我果然还是个门都没入的小菜鸡(っ╥╯﹏╰╥c)

效果图如下：

前端实现利用层级下拉框从页面表格中删选出数据

猜你喜欢