layui页面加载简单模式

>

注意如果方法在layui加载页面之后进行，需要form.render();重新渲染页面

定义模板id

     form表单id 加载数据id


 
       请选择描述
//加载自定义搜索框

/*为下拉框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 += '' + data[i].description + ''
                }
                $("#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'}
            ]]
    });

templet：前段模板引擎加载自定义事件（d模板中的属性.name取值）

    /*监听工具条*/
    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);
        }
    });
});

自定义方法

/新增页面/
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
    });
}

• >保存页面方法调用(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);
        }
    }
});