表格渲染

1.渲染加载一个表格需要用到layui/layui.js插件

2.声明两个全局变量，一个是layer，一个是layuiTable;这两个变量名可以根据的命名爱好命名

3.在页面载入事件里渲染加载表格

4.layer和table是layui/layui.js里面的两个模块，layer用于提示方面，table用于表格渲染

5. layuiTable.render({
   })执行渲染表格，只有渲染了表格才能加载出表格

6.值得注意的是表格得有数据接口url,如果不设置url数据接口，则要给他一个data:[],意思是数据为空，如果url和data:[]都没有那么这个表格加载不出来，呈现一直加载的状态

7. templet是自定义列，里面一般涉及到一些按钮的设置，同时这里还得注意一个问题，就是如果涉及到后面权限去操控按钮时得注意这些一定是按钮先加载完成才能实现对按钮控制，如果按钮控制的方法与创建表格layui.use（）function(){}处于同一位置，受异步的影响，可能在按钮还没有加载出来就已经执行了对这些按钮控制的方法那么这个控制按钮的方法并不能发挥它原本的功能就是无法隐藏按钮或者显示按钮，因为这个按钮都还没有加载出来那就已经执行了方法所以应该把这个方法放到和执行渲染表格tabAcademe = layuiTable.render({})后面，也是同一等级，在把按钮渲染完成后才执行对按钮的操控

$(function () {

       //

$.ajaxSettings.async = false;

        //第四步：方法渲染

       layui.use( ['layer', 'table'], function () {

            layuiTable = layui.table;

            layer = layui.layer,

            //执行渲染

            //第一个实例

            tabAcademe =

layuiTable.render({

                elem: '#id'//指定原始表格元素选择器（推荐id选择器）                

              , url: '' //数据接口               

              , cols: [[ //表头

                      { type: 'radio', fixed: 'left' },//'radio'单选框列,fixed:'left' 将列固定在左边

                      { type: 'numbers', title: '序号' },//序号列，title设定标题名称

                      { field: '', title: '', hide: true },//hide:true 隐藏列

                      { field: '', title: ' ' },//field为需要绑定的数据，title：名称

                      { field: '', title: ' ' },

                      { title: ' ', templet: setOperate,

width: 160, align: ‘center’, fixed: ‘right’ }//width: 160 指定宽度，align 指定对其方式，setOperate为自定义列

              ]],

              page: {

                limit: 10,//指定每页显示的条数

                limits: [5, 10, 15, 20, 25,

30, 35, 40, 45, 50],//每页条数的选择项

            }, //开启分页

            }); 

           //在这里调用方法，可以实现对按钮的操控

            jurisdiction();//控制按钮隐藏或者显示的方法

        }); 

      在这里调用方法无法实现对按钮的控制

     //Jurisdiction（）

    })

//这里做了一个修改按钮和一个删除按钮

function setOperate(data) {

        //获取绑定表格的主键ID

        var academeId =

data.AcademeID;

        var btns = "";

        btns += '<button

type=“button” class=“updates layui-btn layui-btn-xs”
unclicks=openUpdate(’ +
academeId + ‘)>修改’;

        btns += '<button

type=“button” class=“delete layui-btn layui-btn-xs
layui-btn-danger” saveDelete(’ + academeId + ‘)>删除’;

        return btns; 

    }

/权限控制修改按钮和删除按钮

function jurisdiction() {

        var ModularID = 21;

        $.get("/Main/OpTypeSelect?ModularID=" + ModularID + "&time=" + (new Date()).retime(), function (data) {

            $(".updates").hide();//隐藏修改按钮

            $(".delete").hide();//隐藏删除按钮 

            $.each(data, function (i) {

                switch (data[i].Explain) {


                    case "修改":

                        $(".updates").show();//显示修改按钮

                        break;

                    case "删除":

                        $(".delete").show();显示删除按钮

                        break;

                }

            });

        });

    };