查询

-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：vs· jQuery基础
作者： xqll
撰写时间：2019/7/17
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
下面我来演示一下 然后查询数据 和数据绑定
额 上代码一句句解释吧

public ActionResult InquireUnit(LayuiTablePage layuiTablePage)
            //给它一个命名到时候 可以随便给 到时候数据绑定要调用
        {
            var InUt = (from tbCommodityunit in myModels.S_Commodityunit
                        //获取数据
                        orderby tbCommodityunit.CommodityunitID descending
                        //排序
                        select new UnitVo
                        // Vo是value object的缩写;
                        //作用：它是为了页面显示取值方便。所以将数据封装为一个对象。这对象也就是我们说的VO；
                        //Vo则主要用于逻辑层(Controllers)和表示层(Views)之间数据处理封装。
                        {
                            //把需要用到的东西提取出来 
                           CommodityunitID = tbCommodityunit.CommodityunitID,
                           Nameentity = tbCommodityunit.Nameentity,
                            Decimalallowed=tbCommodityunit.Decimalallowed,
                           State = tbCommodityunit.State,
                           Note = tbCommodityunit.Note
                        }).ToList();
            var intTotalRow = InUt.Count();
            List<UnitVo> list = InUt

                .Skip(layuiTablePage.GetStartIndex())
                .Take(layuiTablePage.limit)
                 //Skip表示从第几条数据开始，也就是说在这之前有多少条数据
                 // Take的意思是显示多少条数据，也就相当于我们常用的pagesize
                .ToList();
            //分页
            LayuiTableData<UnitVo> layuiTableData = new LayuiTableData<UnitVo>(); ;
            layuiTableData.count = intTotalRow;//行总数
            layuiTableData.data = list;//具体显示数据
            return Json(layuiTableData, JsonRequestBehavior.AllowGet);
        }

然后就是初始化和表格渲染
先给它个div

<div class="SalestabTitles" id="SalestabTitles" lay-filter="SalestabTitles"></div>

然后在里面写代码

var SalestabTitles;
        var layer, layuiTable, layuiDate;
        var layerIndex = 0;
        $(function () {
            //1、预加载和初始化layui模块
            layui.use(['layer', 'table'], function () {
                //加载模块
                layer = layui.layer;
                layuiTable = layui.table;
                //表格渲染
                SalestabTitles = layuiTable.render({
                    elem: '#SalestabTitles',//绑定元素
                    data: [],
                    cols: [[
//具体需要显示出来的数据
   { type: 'checkbox', fixed: 'left' },
   { type: 'numbers', title: '序号', width: 100 },
   { titile: 'CommodityunitID', fixed: 'CommodityunitID', hide: true },//隐藏列
   { title: '操作', templet: setOperate, align: 'center', width: 150 },//自定义列
   { field: 'Nameentity', title: '单位名称', align: 'center', width: 200, sort: true },
   { field: 'Decimalallowed', title: '允许小数', templet: whetherallow, align: 'center', width: 150 },
   { field: 'State', title: '状态', templet: titleState, align: 'center', width: 150 },
   { field: 'Note', title: '备注', align: 'center', width: 150 },
                    ]],
                    page: {
                        limit: 10,//指定每页显示的条数
                        limits: [5, 10, 15, 20, 25, 30, 35, 40, 45],//每页条数的择项
                    },
                });
                //监听行
                layuiTable.on('row(SalestabTitles)', function (obj) {

      obj.tr.addClass("layui-table-click").siblings().removeClass("layui-table-click");

                    obj.tr.find("div.layui-unselect.layui-form-checkbox")[1].click();
                });
                selctvfdpm();
            });
        });

然后就是设置自定义按钮里面的内容
//自定义按钮

      function setOperate(data) {
            console.log(data);
            var CommodityunitID = data.CommodityunitID;
            var btns = "";
            btns += '<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" onclick=repertor(' + CommodityunitID + ')>编辑</button>';
            btns += '<button type="button" class="layui-btn layui-btn-xs" onclick=remove(' + CommodityunitID + ')>删除</button>';
            return btns;
        }

然后 它得到的样子是