注意如果方法在layui加载页面之后进行，需要form.render();重新渲染页面
定义模板id
form表单id 加载数据id<table id="table" lay-filter="test"></table>
<select id="chosen-select" lay-filter="type-select">
<option value="" selected="">请选择描述</option>
</select>//加载自定义搜索框
/*为下拉框id="chosen-select"加载数据type，description（类型与描述两个属性）*/
/* $(function(){
var html = "";
$.ajax({
url: '${ctx}/sys/dict/queryTypeList',
success : function(data) {
//加载数据
for (var i = 0; i < data.length; i++) {
html += '<option value="' + data[i].type + '">' + data[i].description + '</option>'
}
$("#chosen-select").append(html);
}
});
}); */
/* 定义事件*/
var tableIns;
layui.use(['table','laypage'], function(){
var form = layui.form;
var table = layui.table;
var laypage = layui.laypage;
/*监听select框 此方法用以监听id="label"的下拉款事件进行搜索
form.on('select(type-select)', function(data){
var type = data.value;
var storage=window.localStorage;
storage["type"]=type;
var opts = {
label: $("#label").val(),
}
reLoad(opts);
}); */
/*渲染数据表格*/
tableIns = table.render({
elem: '#table' //table绑定数据id
,url: '${ctx}/origin/business/manager_json'
,method: 'post'
,cellMinWidth: 80
/* ,height: 'full-100' */
,page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
// 限定条数 总数、计数 上一页 页 下一页 到第几页、跳
,curr: 1
,groups: 10 //显示 连续页码
,first: '首页'
,last: '尾页'
}
,even: true //开启隔行背景
,cols: [[ //表头
{field: 'id', title: 'ID', width:50, type:'numbers', sort: true}
,{field: 'business_name', title: '企业名称' }
,{field: 'business_mobile', title: '企业电话', sort: true}
,{field: 'business_addr', title: '企业地址', }
,{field: 'createdate', title: '创建时间', }
,{field: 'remarks', title: '备注',}
,{field: 'delflag', title: '状态', width:80, templet: '#status'}
,{fixed: 'right', width:300, align:'center', toolbar: '#toolbar'}
]]
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
templet：前段模板引擎加载自定义事件（d模板中的属性.name取值）
<script type="text/html" id="status">
{{# if(d.delflag == 0) { }}
<button class="layui-btn layui-btn-sm">正常</button>
{{# } else { }}
<button class="layui-btn layui-btn-sm layui-btn-danger">禁用</button>
{{# } }}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
toolbar:cols中的属性用来定义操作按钮，
<script type="text/html" id="toolbar">
<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>
- 1
- 2
- 3
- 4
- 5
- 6
/*监听工具条*/
table.on('tool(test)', function(obj){
var data = obj.data; /*获得当前行数据*/
var layEvent = obj.event; /*获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）*/
var tr = obj.tr; /*获得当前行 tr 的DOM对象*/
if(layEvent === 'detail'){
}else if(layEvent === 'del'){
layer.confirm('真的删除行么', function(index){
layer.close(index);
/*向服务端发送删除指令*/
alert(data.id);
$.ajax({
url : prefix + "/delete",
type : "post",
data : {'id' : data.id},
success : function(data) {
if (data.code == 0) {
obj.del(); /*删除对应行（tr）的DOM结构，并更新缓存*/
layer.msg(data.msg);/*后台定义的返回值方法*/
} else {
layer.msg(data.msg);
}
}
});
});
}else if(layEvent === 'edit'){
/*打开修改页面*/
openIframe('修改','/update_manager/'+data.id);
}
});
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
自定义方法
/新增页面/
function add() {
openIframe(‘增加’,’/add_manager’);
}
>刷新数据 重写刷新方法，不然会走自定义默认方法
/*刷新数据*/
function reLoad(opts) {
tableIns.reload({
page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
,curr: 1
,groups: 10 //显示 连续页码
,first: '首页'
,last: '尾页'
} ,where:
opts
});
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- >保存页面方法调用(form提交)
layui.use(['form'], function(){
var form = layui.form;
//监听提交
form.on('submit(submitForm)', function(data){
save();
})
});
/* $("#formSubmit").click(function(){
save()
}); */
/*保存方法*/
function save() {
$.ajax({
cache : true,
type : "POST",
url : "${ctx}/origin/business/save_manager",
data : $('#businessForm').serialize(), // 你的formid
async : false,
error : function(request) {
parent.layer.alert("网络超时");
},
success : function(data) {
if (data.code == 0) {
parent.layer.msg("操作成功");
parent.reLoad();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
} else {
parent.layer.alert(data.msg);
}
}
});