LayUI的表格在项目中的应用

layui的表格在.NET MVC中的应用,页面的主要代码:

<div>    
    <table id="uu" lay-filter="demo"></table>


    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="nameTpl">
        <a href="javascript:alert('Hello World!')">{{d.UserPhone}}</a>
    </script>
</div>

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Content/layui.js"></script>       
<script>
    layui.use(['table', 'laypage', 'layer', 'laydate', 'carousel','upload','element'], function () {
        var table = layui.table,
            laypage = layui.layPage,
            layer = layui.layer,
            laydate = layui.laydate,//日期
            carousel = layui.carousel,//轮播
            upload = layui.upload,//上传
            element = layui.element;//元素操作
        //一个实例
        table.render({
            elem: '#uu'
          //, height: 315
            , url: '/UserInfo/LayUiShowUserList' //数据接口           
          , page: true //开启分页
            , limit: 10  //默认值就是10
            , limits: [10, 20, 30, 100]
            //,skin:'nob'('line'/'row')
            , even: true  //开启隔行背景
            //,size:'lg'  设置表格尺寸,'lg':大尺寸,'sm':小尺寸
          , cols: [[ //表头
            { field: 'Id', title: 'ID', fixed: 'left' } //表头参数:type:'normal',其他值:'checkbox'(复选框列),'space'(空列),'numbers'(序列号)
            , { field: 'UserName', title: '用户名' }
            , { field: 'UserGender', title: '性别', sort: true }
            , { field: 'UserNum', title: '学号' }
            , { field: 'UserPhone', title: '电话' }
            , { field: 'toolbar', title: '操作', align: 'center', toolbar: '#barDemo' }
            ,{field:'UserName',title:'姓氏',align:'center',templet:'#nameTpl'}
          ]]
            , response: {
                statusName: 'code' //数据状态的字段名称，默认：code
                , statusCode: 200 //成功的状态码，默认：0
                , msgName: 'hint' //状态信息的字段名称，默认：msg
                , countName: 'count' //数据总数的字段名称，默认：count
                , dataName: 'rows' //数据列表的字段名称，默认：data
            }
            , done: function (res, curr, count) {
                //如果是异步请求数据方式,res即为你接口返回的信息.
                //layer.msg(res.rows[2].UserName);  //返回列表信息中的第三条数据的用户名
                
            }
        });


        //监听工具条
        table.on('tool(demo)', function(obj) {
            var data = obj.data //获取当前行数据                
                ,
                layEvent = obj.event; //获得lay-event对应的值
            if (layEvent==="detail") {
                layer.msg(data.UserName);
            }else if (layEvent === 'edit') {
                layer.msg(data.Id);
            } else {
                layer.msg('delete your data');
            }
        });
    });

 

后台注意需要传回的数据,不管什么后台,只要传回数据的格式正确就是OK的-->

注意:视图所需要的参数全部传回去并且参数名称要正确,例如:

return Json(new{code=200, hint = "hello world!!", rows=list,count=totalCount}, JsonRequestBehavior.AllowGet);

其中hint的默认值为msg,rows的默认值为data.