layui 动态数据表格的学习

layui的学习

前台页面

调用的css以及js

js来调用数据表格

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
{
    /// 

    /// Te 的摘要说明
    /// 
    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

/// 

        /// layui的DataTable转Json(卢)
        /// 
        /// 
        /// 
        /// 
        /// 
        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(" ");
                        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数据
}