分享TABLE部分代码给新手快速上手!

分享 已结 精帖
27 1163
午夜惊魂
悬赏:10飞吻
尤其是用ASP.NET MVC开发网站的童鞋们,你们的福利到了!
先上一张效果图,后边贴代码:

功能涵盖表格渲染,工具条事件监听,表格重载,表格列模版应用,多选,编辑数据获取等
虽然没有涵盖所有,基本的功能都在,目的是让新手有个实际项目完整例子的参考,免去很多
新手对于TABLE数据加载,重载,模版应用等功能的困惑造成社区很多这样的提问贴
回帖
  • 感谢分享[心] ,文档编写地不行,还好有你们来先驱
    0 回复
  • VIEW部分代码:
    <div class="layui-form-item">
    <div class="layui-input-inline">
    <input type="text" id="filter" name="filter" value="" lay-verify="" placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
    <button class="layui-btn" id="search" name="search">
    <i class="layui-icon"></i>搜索
    </button>
    </div>
    </div>
    <div>
    <table id="customer" lay-filter="customer"></table>
    </div>

    @*工具栏模版*@
    <script type="text/html" id="bar">
    <a class="layui-btn layui-btn-mini layui-btn-normal" title="详细信息编辑" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-mini" title="存储区域设置" lay-event="edit">设置</a>
    <a class="layui-btn layui-btn-mini" title="贸易关系设置" lay-event="edit">关系</a>
    </script>
    @*日期模板*@
    <script type="text/html" id="dateTpl">
    {{ layui.laytpl.fn(d.editdate) }}
    </script>
    @*执行状态模板*@
    <script type="text/html" id="statusTpl">
    {{# var status=d.status }}
    {{# if (status=='1'){ }}
    <span class="layui-badge layui-bg-blue" style="font-size:13px">启用</span>
    {{# } else{ }}
    <span class="layui-badge" style="font-size:13px">禁用</span>
    {{# } }}
    </script>
    @section Scripts{
    <script type="text/javascript">
    layui.use(['layer', 'table'], function ()
    {
    var table = layui.table;
    var layer = layui.layer;
    layui.laytpl.fn = function (value)
    {
    //json日期格式转换为正常格式
    var date = new Date(parseInt(value.replace("/Date(", "").replace(")/", ""), 10));
    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    return date.getFullYear() + "-" + month + "-" + day;
    }
    //--------------方法渲染TABLE----------------
    var tableIns = table.render({
    elem: '#customer'
    , id: 'customer'
    , url: '@Url.Action("CustomerList", "Customer")'
    , cols: [[
    { checkbox: true, LAY_CHECKED: false } //其它参数在此省略
    , { field: 'rowId', title: '@Html.DisplayNameFor(a => a.rowId)', width: 100, align: 'center' }
    , { field: 'customer_code', title: ' @Html.DisplayNameFor(a=>a.customer_code)', width: 150, align: 'center' }
    , { field: 'company', title: '@Html.DisplayNameFor(a => a.company)', width: 300, align: 'center' }
    , { field: 'descr', title: '@Html.DisplayNameFor(a => a.descr)', width: 200, align: 'center' }
    , { field: 'address1', title: '@Html.DisplayNameFor(a => a.address1)', width: 300, align: 'center' }
    , { field: 'contact', title: '@Html.DisplayNameFor(a => a.contact)', width: 100, align: 'center' }
    , { field: 'status', title: '@Html.DisplayNameFor(a => a.status)', width: 100, align: 'center', templet: "#statusTpl" }
    , { field: 'editwho', title: '@Html.DisplayNameFor(a => a.editwho)', width: 80, align: 'center' }
    , { field: 'editdate', title: '@Html.DisplayNameFor(a => a.editdate)', width: 160, align: 'center', templet: "#dateTpl" }
    , { fixed: 'right', width: 160, align: 'center', toolbar: '#bar' }
    ]]
    , page: true
    , limits: [15, 20, 40, 60, 80]
    , limit: 15 //默认采用10
    , response: {
    statusName: 'code' //数据状态的字段名称,默认:code
    , statusCode: 0 //成功的状态码,默认:0
    , msgName: 'msg' //状态信息的字段名称,默认:msg
    , countName: 'count' //数据总数的字段名称,默认:count
    , dataName: 'customer' //数据列表的字段名称,默认:data
    }
    , done: function (res, curr, count)
    {
    //如果是异步请求数据方式,res即为你接口返回的信息。
    //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
    //console.log(res);
    //得到当前页码
    //console.log(curr);
    $("#curPageIndex").val(curr);
    //得到数据总量
    //console.log(count);
    }
    });

    //#region --------------搜索----------------
    $("#search").click(function ()
    {
    var strFilter = $("#filter").val();
    tableIns.reload({
    where: {
    filter: strFilter
    }
    });
    });
    //#endregion

    //#region --------------批量删除----------------
    $("#delete").click(function ()
    {
    var checkStatus = table.checkStatus('customer');
    var count = checkStatus.data.length;//选中的行数
    if (count > 0)
    {
    parent.layer.confirm('确定要删除所选客户信息', { icon: 3 }, function (index)
    {
    var data = checkStatus.data; //获取选中行的数据
    var customer_code = '';
    for (var i = 0; i < data.length; i++)
    {
    customer_code += data[i].customer_code + ",";
    }
    console.log(customer_code);
    $.ajax({
    url: '@Url.Action("Delete","Customer")',
    type: "post",
    data: { customer_code: customer_code },
    dataType: "text",
    success: function (result)
    {
    if (result.length != 0)
    {
    if (result == "ok")
    {
    parent.layer.msg('删除成功', { icon: 1, shade: 0.4, time: 1000 })
    $("#search").click();//重载TABLE
    parent.layer.close(index);
    }
    else if (result == "error")
    {
    parent.layer.msg("删除失败", { icon: 5, shade: [0.4], time: 1000 });
    }
    }
    },
    error: function (error)
    {
    parent.layer.alert(error.responseText, { icon: 2, title: '提示' });
    }
    })
    });
    }
    else
    parent.layer.msg("请至少选择一条数据", { icon: 5, shade: 0.4, time: 1000 });
    });
    //#endregion

    //#endregion
    //工具条事件监听
    table.on('tool(customer)', function (obj)
    { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值
    var tr = obj.tr; //获得当前行 tr 的DOM对象
    var customer_code = data.customer_code;
    if (layEvent === 'edit')
    { //编辑
    parent.layer.open({
    type: 2,
    title: '编辑客户信息',
    shade: 0.4, //阴影度
    fix: false,
    shadeClose: false,
    maxmin: false,
    area: ['1260px;', '645px;'], //窗体大小(宽,高)
    content: '@Url.Action("CustomerEdit","Customer")?customer_code=' + customer_code,
    success: function (layero, index)
    {
    var body = layer.getChildFrame('body', index); //得到子页面层的BODY
    body.find('#hidValue').val(index); //将本层的窗口索引传给子页面层的hidValue中
    },
    end: function ()
    {
    var handle_status = $("#handle_status").val();
    console.log(handle_status);
    if (handle_status == 'ok')
    {
    parent.layer.msg('修改成功', { icon: 1, shade: 0.4, time: 1000 });
    $("#search").click();
    $("#handle_status").val('');
    }
    else if (handle_status == "error")
    {
    parent.layer.msg('修改失败', { icon: 5, shade: 0.4, time: 1000 });
    }
    }
    });
    }
    });
    });
    </script>
    }
    0 回复
  • Controller代码:
    //获取数据列表
    public ActionResult CustomerList(string filter, int page = 1, int limit = 15)
    {
    wmsBll.Customer b_customer = new wmsBll.Customer();
    try
    {
    int recordCount;
    string strFilter = "";
    if (filter != "" && filter != null)
    {
    strFilter += " (";
    strFilter += " customer_code like '%" + filter + "%'";
    strFilter += " or company like '%" + filter + "%'";
    strFilter += " or descr like '%" + filter + "%'";
    strFilter += " or address1 like '%" + filter + "%'";
    strFilter += " or contact like '%" + filter + "%'";
    strFilter += " or editwho like '%" + filter + "%'";
    strFilter += " or editdate like '%" + filter + "%'";
    strFilter += ")";
    }
    DataTable dt = wmsBll.Common.Page.DataPage("customer", "*", "adddate desc,customer_code", strFilter, limit, page, out recordCount);
    List<wmsModel.Customer> customer = wmsBll.Common.IList.DataTableToList<wmsModel.Customer>(dt);
    wmsModel.LayuiTable table = new wmsModel.LayuiTable();
    table.code = 0;
    table.msg = "";
    table.count = recordCount;
    table.customer = customer;
    return Json(table, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
    wmsBll.LogHelper.WriteLog(this.GetType(), ex.ToString());
    }
    return View();
    }
    0 回复
  • wmsModel.LayuiTable类:
    using System.Collections.Generic;

    namespace wmsModel
    {
    /// <summary>
    /// Layui表格组件
    /// </summary>
    public class LayuiTable
    {
    /// <summary>
    /// layui表格默认Json格式参数code,默认值为0
    /// </summary>
    public int code { get; set; }
    /// <summary>
    /// layui表格默认Json格式参数msg,默认值为""
    /// </summary>
    public string msg { get; set; }
    /// <summary>
    /// layui表格默认Json格式参数count,记录总数
    /// </summary>
    public int count { get; set; }
    /// <summary>
    /// 客户
    /// </summary>
    public List<Customer> customer { get; set; }
    }
    }
    0 回复
  • tab 哪里 怎么搞得
    0 回复
  • 为啥我配置
    response: {
    statusName: 'code' //数据状态的字段名称,默认:code
    , statusCode: 0 //成功的状态码,默认:0
    , msgName: 'msg' //状态信息的字段名称,默认:msg
    , countName: 'count' //数据总数的字段名称,默认:count
    , dataName: 'customer' //数据列表的字段名称,默认:data
    }
    不生效呢
    0 回复
  • Dick
    14天前
    @三零网科 response貌似有点问题,尽量先默认官方格式吧,等官方更新。
    0 回复
  • @三零网科 response没问题啊?我用的好好的啊。我的代码里边的dataName对应的是我LayuiTable中的customer对象集合,LayuiTable也是一个封装类,可以把系统所有的表格需要加载的对象弄进来
    0 回复
  • @Dick response哪里有问题?
    0 回复
  • 放一个Controller中批量删除的例子
    //批量删除
    [HttpPost]
    public ActionResult Delete()
    {
    try
    {
    string data = Request["customer_code"].ToString();
    data = data.Remove(data.Length - 1, 1);
    string[] customers = data.Split(',');
    string customer_codelist = "";
    for (int i = 0; i < customers.Length; i++)
    customer_codelist += "'" + customers[i] + "',";
    customer_codelist = customer_codelist.Remove(customer_codelist.Length - 1, 1);
    wmsBll.Customer b_customer = new wmsBll.Customer();
    if (b_customer.DeleteList(customer_codelist))//批量删除用户,参数类型为'c1','c2','c3'...
    return Content("ok");
    }
    catch (Exception ex)
    {
    wmsBll.LogHelper.WriteLog(this.GetType(), ex.ToString());
    }
    return Content("error");
    }
    #endregion
    0 回复
  • @醉灬轻叹 clos参数你可以直接指定title,你想问的主要是这个response参数吧
     , response: {
    statusName: 'code' //数据状态的字段名称,默认:code
    , statusCode: 0 //成功的状态码,默认:0
    , msgName: 'msg' //状态信息的字段名称,默认:msg
    , countName: 'count' //数据总数的字段名称,默认:count
    , dataName: 'customer' //数据列表的字段名称,默认:data
    }
    这里的response参数对应的是我的封装类:
    using System.Collections.Generic;

    namespace wmsModel
    {
    /// <summary>
    /// Layui表格组件
    /// </summary>
    public class LayuiTable
    {
    /// <summary>
    /// layui表格默认Json格式参数code,默认值为0
    /// </summary>
    public int code { get; set; }
    /// <summary>
    /// layui表格默认Json格式参数msg,默认值为""
    /// </summary>
    public string msg { get; set; }
    /// <summary>
    /// layui表格默认Json格式参数count,记录总数
    /// </summary>
    public int count { get; set; }
    /// <summary>
    /// 客户
    /// </summary>
    public List<Customer> customer { get; set; }
    /// <summary>
    /// 料
    /// </summary>
    public List<Sku> sku { get; set; }
    }
    }
    customer就是你的实际对象集合和前台response中的dataName对应
    0 回复
  • @Dick 如果完全默认官方格式,那是不可能的,实际代码量会增加很多,并且很多时候,实体类还有些参数是不允许让你改来改去来匹配layui的表格参数,再一个,现有的response我用的没问题,我不知道你说的问题在哪里。在response参数没出来之前的那个版本我也写过,那时候为了匹配参数是写的真心累
    0 回复
  • Dick
    14天前
    @午夜惊魂
    response你自定义一下count和data的名称,然后点击表头排序试试呗!
    0 回复
  • @Dick 排序和全选混用是有问题,这个我早说过了,现在他的问题是数据出不了
    0 回复
  • Dick
    14天前
    @午夜惊魂 数据出不了那就用官方默认的返回格式试试呗,如果默认能返回那就是response有问题了
    0 回复
  • 线芯
    13天前
    <table id="customer" lay-filter="customer"></table>
    var tableIns = table.render({
    elem: '#customer'
    id:'customer'
    })
    加载table必须个个customer保持一致?为何我写出来的table显示的位置错乱且没有标题
    0 回复
  • @线芯 不用保持一致,按你自己的实际写,你的TABLE显示位置错乱且没有标题,按你给出的这点代码是看不出来的
    0 回复
  • 线芯
    13天前
    <table id="tableManager" class="layui-table" lay-filter="tableManager"></table>
    layui.use([ 'form', 'layer','laytpl', 'table'], function(){
    var dataTable1 = layui.table;
    var tableIns;
    tableIns = dataTable1.render({
    elem: '#tableManager'
    , id: 'tableManager'
    , height: 'full-20'
    , url: '/acc/queryEdposUsers?displayState=99'
    , loding: true
    // , where: {}
    // , method: 'post'
    // , request: {}
    , cols: [
    {checkbox: true}
    ,{field: 'uid', title: '编号', width: 100, align: 'center'}
    ,{field:'userName', title:'姓名', width: 100, align: 'center'}
    ,{field:'userType', title:'类型', width: 100, align: 'center', templet:'#userTypeTpl'}
    ,{field:'ext1', title:'工具', width: 100, align: 'center', templet:'#ext1Tpl'}
    ,{field:'orgName', title:'组织', width: 80, align: 'center'}
    ,{field:'account', title:'账号', width: 100, align: 'center'}
    ,{field:'tel', title:'电话', width: 80, align: 'center'}
    ,{field:'sex', title:'性别', width: 80, align: 'center', templet:'#sexTpl'}
    ,{field:'email', title:'邮箱', width: 80, align: 'center'}
    ,{field:'switchLogin', title:'开关', width: 100, align: 'center'}
    ,{field:'displayImsPush', title:'说明', width: 100, align: 'center'}
    ,{fixed:'right', width:160, align:'center', toolbar:'#editTpl'}
    ]
    ,response: {
    statusName: 'status' //数据状态的字段名称,默认:code
    ,statusCode: 0 //成功的状态码,默认:0
    ,msgName: '' //状态信息的字段名称,默认:msg
    ,countName: 'total' //数据总数的字段名称,默认:count
    ,dataName: 'rows'
    }
    有什么问题吗?这个代码?
    0 回复
  • @线芯 你的模版代码呢
    0 回复
  • 线芯
    13天前
    {“rows”:[{model},{model}],"total":4}对于这种返回数据来说, 我写的response格式对吗?
    0 回复
  • @线芯 少参数啊
    statusName: 'status' //数据状态的字段名称,默认:code
    ,statusCode: 0 //成功的状态码,默认:0
    ,msgName: '' //状态信息的字段名称,默认:msg
    0 回复
  • @线芯 返回的数据格式,参照这个:
    http://www.layui.com/demo/table/user/?page=1&limit=30
    0 回复
  • 线芯
    13天前
    @午夜惊魂 也就是说我必须在返回的数据里加参数吗?{“rows”:[{model},{model}],"total":4,"code":0,"msg":""}
    非常感谢您。
    0 回复
  • @线芯 对,必须加上另外几个参数,你response中对应的参数statusName,statusCode,msgName
    0 回复
  • tableIns.reload({
    where: {
    filter: strFilter
    }
    });


    filter 这个表示什么意思?
    0 回复
  • @澕婯哋尒忸 这个是传给后台的查询过滤参数,可以随意定义,只要保证前后台一致就可以
    0 回复
  • Halo
    1天前
    @午夜惊魂 老哥,能帮我看个问题吗
    http://fly.layui.com/jie/15392/
    0 回复