AI智能
改变未来

实现 jquery 与layui结合生成table表,请求Ajax接口


标题(实现 jquery 与layui结合生成table表,请求Ajax接口)

//table表

function datas(obj){// console.log(obj)layui.use([\'laydate\', \'laypage\', \'layer\', \'table\'], function () {var laydate = layui.laydate //日期, laypage = layui.laypage //分页, layer = layui.layer //弹层, table = layui.table //表格table.render({elem: \'#demoTable\'  //这里是table id, height: 550,limit: 18, //每一页为18条数据//page:true   //这里我没有用到layui里面自带的分页所以没有放出来loading: true, data: obj.records  //此处是请求的ajax接口数据, title: \'Table单\',toolbar: \'<span>Table单</span>\', cols: [[ //表头//{ type: \'checkbox\', fixed: \'left\' }{ field: \'recordNum\', title: \'ID\', width: 50, fixed: \'left\',},{ field: \'billNo\', title: \'编号\', width: 110, sort: true, fixed: \'left\', }, { field: \'empName\', title: \'业务员\', width: 80,sort: true,}, { field: \'supplyName\', title: \'供应商\', width: 150, sort: true}, { field: \'bizTypeName\', title: \'类型\', width: 100, sort: true }, { field: \'deptName\', title: \'部门\', width: 100, sort: true,}, { field: \'stockName\', title: \'仓库\', width: 100 }, {field: \'statusName\',title: \'审核状态\',width: 100,sort: true,templet: function(res) {if (res.statusName == \'已审核\') {return \'<span style=\"color:green\">已审核</span>\';} else {return \'<span style=\"color:red\">未审核</span>\';}}}]],done: function (res, curr, count) {//此处是双击tr 改变当前 tr 颜色$(\'#demoTable\').next().find(\'.layui-table-body\').find(\"table\").find(\"tbody\").children(\"tr\").on(\'dblclick\', function () {var id = JSON.stringify($(\'#demoTable\').next().find(\'.layui-table-body\').find(\"table\").find(\"tbody\").find(\".layui-table-hover\").data(\'index\'));var obj = res.data[id];//console.log(obj);var data_index = $(this).attr(\'data-index\');//得到当前的tr的index$(\".layui-table-body tr\").attr({\"style\":\"background:#FFFFFF\"});//其他tr恢复表格颜色$(\".layui-table-body tr[data-index=\" + data_index + \"]\").attr({ \"style\": \"background:#98E0AD\" });//改变当前tr颜色});//回调  表头可以更改颜色,不过这里会影响到其他使用 原生写的table 表头的颜色,//这里没有多大影响,看你怎么使用了$(\'th\').css({ \'background-color\': \'#009688\', \'color\': \'#fff\',})//这里也可以调用其他函数方法,进行取值}});});

}

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 实现 jquery 与layui结合生成table表,请求Ajax接口