layui 动态数据表格的学习

layui的学习

前台页面

 <table class="layui-hide" id="demo"></table>

调用的css以及js

<link href="../layui/css/layui.css" rel="stylesheet" type="text/css" />
    <script src="../layui/layui.js" type="text/javascript"></script>

js来调用数据表格

<script type="text/javascript">
        layui.use('table', function () {
            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#demo',       //表格的id
                height: 312,
                url: 'Te.ashx', //数据接口
                page: true, //开启分页
                cols: [[ //表头
                  { field: 'ID', title: 'ID', sort: true, fixed: 'left',width:80 },
                  { field: 'ZB', title: '公司', align: 'center' },
                  { field: 'DW', title: '单位',align: 'center', width: 50 },
                  { field: 'L_BQ', title: '本期', align: 'center' },
                  { field: 'L_YC', title: '月初', align: 'center' },
                  { field: 'L_NC', title: '年初', align: 'center' },
                ]]
            });
        });
        </script>

Te.ashx中处理返回json数据

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using qw1.Common.DotNetJson;
using qw1.DAL;
using qw1.IDAO;
using System.Data;

namespace qw1.Style
{
    /// <summary>
    /// Te 的摘要说明
    /// </summary>
    public class Te : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Buffer = true;
            context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
            context.Response.AddHeader("pragma", "no-cache");
            context.Response.AddHeader("cache-control", "");
            context.Response.CacheControl = "no-cache";
            string page = context.Request["page"];   //接收page参数，代表第page页
            string limit = context.Request["limit"];  //接收limit参数，代表一页limit条
            Query_IDAO project = new Query_DAL();
            string date = DateTime.Now.ToString("yyyy-MM-dd");
            DataTable dt = project.Index_Zjg_Dailyreport(date);
            int count = dt.Rows.Count;   //表的总条数
            string jsondata = JsonHelper.DataTableToJsonLayui(project.Index_Zjg_DailyreportLayui(date,page,limit), "data",count);  //将表格转换为json
            context.Response.Write(jsondata);   //返回表的json数据
            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

表格转换json

/// <summary>
        /// layui的DataTable转Json(卢)
        /// </summary>
        /// <param name="dt"></param>
        /// <param name="dtName"></param>
        /// <param name="count"></param>
        /// <returns></returns>
        public static string DataTableToJsonLayui(DataTable dt, string dtName,int count)
        {
            StringBuilder sb = new StringBuilder();

            if (DataTableHelper.IsExistRows(dt))
            {
            //layui返回的json必须满足特定的格式才能显示出来，
                sb.Append("{\"code\":0,");
                sb.Append("\"msg\":\"hi\",");
                sb.Append("\"count\":");
                sb.Append(count);
                sb.Append(",\"");
                sb.Append(dtName);
                sb.Append("\":[");
                foreach (DataRow dr in dt.Rows)
                {
                    sb.Append("{");
                    foreach (DataColumn dc in dr.Table.Columns)
                    {
                        sb.Append("\"");
                        sb.Append(dc.ColumnName);
                        sb.Append("\":\"");
                        if (dr[dc] != null && dr[dc] != DBNull.Value && dr[dc].ToString() != "")
                            sb.Append(dr[dc]).Replace("\\", "/");
                        else
                            sb.Append("&nbsp;");
                        sb.Append("\",");
                    }
                    sb = sb.Remove(sb.Length - 1, 1);
                    sb.Append("},");
                }
                sb = sb.Remove(sb.Length - 1, 1);
            }
            sb.Append("]}");
            return JsonCharFilter(sb.ToString());
        }

如layui官方文档所示的需含有以下内容的json数据才能显示：

{
“code”: 0, //成功后的代码为0
“msg”: “”, //提示文本
“count”: 180, //表的总条数
“data”: [{}, {}] //表的json数据
}