页面数据绑定

刚开始的时候没有进行查询和渲染列表的时候，是没有表格和数据出现的，如下图

当我们进行查询和渲染列表的时候，数据和表格都会出现的,修改和删除这两个按钮是在操作那里写的函数，然后调用函数让修改和删除这两个按钮显示在操作那一列的每一行里。

实现查询功能代码如下，首先在控制器这边把方法写好，一步步来，1、给一个参数 layuiTablePage；
2、查询公告类型 ，3、进行倒序排序，4、开始分页操作，5、返回列表，有两种方法已经标明，
6、在方法这边添加视图。

参数：layuiTablePage，局部变量：layuiTableData，如果不是定义好的，它们是可以随便命名的，你觉得怎样好记一点，就怎样命名，看你个人喜欢。

//查询公告类型

  public ActionResult SelectNoticeTypeAll(LayuiTablePage layuiTablePage)
   {
        var listNoticeType = (from tbNoticeType inmyModels.SYS_NoticeTypeTable

                            //倒叙排序, 主键ID: NoticeTypeID
                              orderbytbNoticeType.NoticeTypeID descending                    
                              select tbNoticeType);
        //分页操作
        List<SYS_NoticeTypeTable>listnNoticeTypeDetails = listNoticeType

           .Skip(layuiTablePage.GetStartIndex())// GetStartIndex 分页开始序号索引

            .Take(layuiTablePage.limit)// limit 代表每页数据量

            .ToList();//返回ToList();

        //返回列表,第一种方法

        LayuiTableData<SYS_NoticeTypeTable> layuiTableData= new LayuiTableData<SYS_NoticeTypeTable>();

        layuiTableData.count =listNoticeType.Count();//总行数

        layuiTableData.data =listnNoticeTypeDetails;//数据

        //返回列表,第二种方法

        //LayuiTableData<SYS_NoticeTypeTable>layuiTableData = new LayuiTableData<SYS_NoticeTypeTable>

        //{

        //count =listNoticeType.Count();//总行数

        //data =listnNoticeTypeDetails;//数据

        //}

        returnJson(layuiTableData, JsonRequestBehavior.AllowGet);

    }

添加好视图，在视图里面写代码。

 1、先做全局变量，2、页面载入事件，3、加载和初始化layui模块，4、赋值，5、渲染表格，6、数据链接，7、把表头建好，然后再给里面赋值。


 <script>
 //全局变量的声明
    var tabNoticeType;//公告类型table
    var layer, layuiTable;
 //1.0 页面载入事件
    $(function () {
        //加载和初始化layui模块
        layui.use(['layer', 'table'], function () {
            //赋值
            layer = layui.layer;
            layuiTable = layui.table; 
            tabNoticeType =layuiTable.render({ //渲染表格
                elem: '#tabNoticeType',//html table id
                url: '/SystemManagement/IssuanceNotice/SelectNoticeTypeAll',//数据接口
                cols: [[//表头
                   { type: 'radio', fixed: 'left' },//单选框列,fixed:'left' 将列固定在左边
                   { type: 'numbers', title: '序号' },//序号列，title设定标题名称
                   { field: 'NoticeTypeID', title: 'NoticeTypeID', hide: true },//hide:true 隐藏列
                   { field: 'NoticeTypeName', title: '公告类型名称' },
                   { title: '操作', templet:setOperateNoticeType, align: 'center', fixed: 'right' }//width: 160 指定宽度，align 指定对其方式
                ]],
            });
         });
    })

让修改和删除这两个按钮显示在操作那一列的每一行里，就要调用表头操作那里命名的函数，如果函数不对，整张表的数据都不会显示出来，所以要细心写代码，代码如下。
调用声明的函数：setOperateNoticeType

 function setOperateNoticeType(data) { //声明一个函数，数据绑定，不然会出错

 var ID = data.NoticeTypeID;//获取主键ID

 var btns = '<button type="button" class="layui-btnlayui-btn-xs" onclick=updateNoticeType(' + ID + ')>修改</button>';

     btns += '<buttontype="button" class="layui-btn layui-btn-xslayui-btn-danger" onclick=deleteNoticeType(' + ID + ')>删除</button>';

 return btns;
 
    }

</script>