Today, a table data query is implemented with the front end, mainly including two functions, table rendering, and table query
The HTML layout is divided into upper and lower parts, the deletion column and the content table column. The deletion column is a hierarchical drop-down selection box made of a combination of ul + li. The specific number of levels depends on the project requirements. The content table uses It is laidui to render, directly po code:
<!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');
});
//Render data table
layui.use('table', function(){ var table = layui.table; table.render({ elem: '#datatable' ,url:'json/table.json', data:Arr , cellMinWidth: 80 // Globally define the minimum width of regular cells, new in layui 2.2.1 , cols: [[ {field:'id', title: 'ID', sort: true, filter: true} ,{field: 'username', title: 'username'} //width supports: numbers, percentages and not filled. You can also locally define the minimum width of the current cell through the minWidth parameter, which is new in layui 2.2.1
,{field:'sex', title: 'sex', sort: true, filter: true}
,{field:'city', title: 'city'}
,{field:'sign', title: 'signature'}
,{field:'classify', title: 'occupation', align: 'center', filter: true} // cell content is centered horizontally,{field:'
experience', title: 'integral', sort: true, align : 'right'} //The cell content is aligned horizontally to the right
,{field:'score', title: 'score', sort: true, align: 'right'}
,{field:'wealth', title: 'wealth' , 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) { //Render data table layui.use('table', function(){ var table = layui.table; table.render({ elem: '#datatable' ,data:data ,cellMinWidth: 80 //Globally define regular cells The minimum width of the grid, new in layui 2.2.1 , cols: [[
{field:'id', title: 'ID', sort: true, filter: true}
,{field:'username', title: 'username'} //width supports: numbers, percentages and not filled. You can also locally define the minimum width of the current cell through the minWidth parameter, new in layui 2.2.1
, {field:'sex', title: 'gender', sort: true, filter: true}
,{field:'city' , title: 'city'}
,{field:'sign', title: 'signature'}
,{field:'classify', title: 'occupation', align: 'center', filter: true} //cell content Horizontally centered
, {field:'experience', title: 'integral', sort: true, align: 'right'} // cell content horizontally right, {field:'score', title: 'score', sort
: true,
]]
,done: function (res, curr, count){
// debugger;
a=res.data;
return res;
// window.resJson=res;
}
});//end render
});
}
</script>
</body>
</html>
Summary : Although the code may still be very low, it feels like it has come out anyway. Writing code must be logical and well thought out
When adding click events to multiple elements, it is not necessary to use the acquisition object, loop through to add click events, and you can also use the jQuery method (Appendix 1). If it is a simple processing operation, you can even use the inline onclick() method, but it should be noted that if you use the inline method, then when you click, you will get the windows object. If you need to operate on the text or attributes, it may be more difficult. Difficult to get ( to be resolved )
<p οnclick=xx()> This is a p </p>
function xx(){}
An eval() method is also used to convert the json format into an array. When rendering layui, it does not necessarily start from the url link. You can also use an array and add data.
attachment1:
<!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>Click on this paragraph. </p>
<p>Click on this paragraph. </p>
<p>Click on this paragraph. </p>
<p>Click on this paragraph. </p></body>
</html>
Ah~ let’s not talk about it, the front end is so difficult, I’m still a rookie who has never gotten into it (っ╥╯﹏╰╥c)
The renderings are as follows:
