layui学习之路——数据表格

layui学习之路——数据表格

之前用.net开发的网站很多功能体验不佳，比如锁定表头和数据编辑，尽管能实现，但使用起来很糟糕，尤其是数据量大的时候。最近学了一段时间layui，感觉效果还可以，但比我想象中难，不是套个框架就能用的，现在讲学习心得记录一下，后台语言为C#。
首先就是数据表格。
html：

//第一种静态表格,直接用的官方文档例子
<table lay-even  class="layui-table " >
          <colgroup>
            <col width="150">
            <col width="200">
            <col>
          </colgroup>
          <thead>
            <tr>
              <th>昵称</th>
              <th>加入时间</th>
              <th>签名</th>
            </tr> 
          </thead>
          <tbody>
            <tr>
              <td>贤心</td>
              <td>2016-11-29</td>
              <td>人生就像是一场修行</td>
            </tr>
            <tr>
              <td>许闲心</td>
              <td>2016-11-28</td>
              <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
            </tr>
          </tbody>
        </table>

//第二种展现数据库数据，这个才是重点
 <table id="demo" lay-filter="test" ></table>

js：

 $(document).ready(function() {   
            reloadTable();
        });
function reloadTable(){            //这里将数据表格封装成一个方法，方便之后添加功能
                layui.use(['upload', 'element', 'layer','table'],function(){
                    var table=layui.table;
                    //var layer = layui.layer;
                    //var upload=layui.upload;
                    var index = layer.load(1); //添加laoding,0-2两种方式
                    table.render({
                        elem:'#demo',            //对应html的table的id
                        height:600,                  //整张表的高度，设置高度后自动锁定表头
                        url:'global/DataService_Test.ashx' ,      //数据源，就是下面的文件
                        loading:false,    //加载条
                        method:'post',    //post方法本地第一次加载IE会报error，谷歌没问题
                        page:false,                    //分页
                       // toolbar: '#toolbarDemo',   //指向自定义工具栏
                        defaultToolbar: [], 
                       //    limit:20,
                        request: {
                        pageName: 'page', //页码的参数名称，默认：page
                        limitName: 'limit' //每页数据量的参数名，默认：limit
                        },
                        id: 'table1',
                        parseData: function(res) {
                           return {
                               "code": res.code, //数据状态的字段名称，默认：code
                               "msg": res.msg, //成功的状态码，默认：0    
                               "count": res.count, //状态信息的字段名称，默认：msg
                               "data": res.data//数据总数的字段名称，默认：count
                               //dataName: 'data' //数据列表的字段名称，默认：data
                           };
                       },
                       
                        cols:[[
                           {type:'radio'}   //单选列
                          ,{field: 'col1', title: 'col1', align:'center'}   
                          ,{field: 'col2', title: 'col2',align:'center'}
                          ,{field: 'col3', title: 'col3',width:100, align:'center'} 
                        ]],   
                        done: function(res, curr, count) { //返回数据执行回调函数
                             console.log(res);   //所有数据
                             console.log(curr);  //得到当前页码
                             console.log(count);//得到数据总量
                             layer.close(index); //返回数据关闭loading
                             /*  for (var i = 0; i < index; i++) {        //改变单元格背景色
                                $("[data-field='col1']").children().each(function () {
                                    if ($(this).text() == 'Y') {
                                        $(this).css({ "background-color": "skyblue", "color": "#ffffff" });
                                    } 
                                });
                            }*/
                          }
                    });
                    });
                    }       //js括号还得去notepad++里确认下对应关系……

ashx即一般程序文件：

    public class DataService_Test : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            DataSet ds = new DataSet();
            SqlConnection DB = new SqlConnection(WebConfigurationManager.AppSettings["key1"].ToString());
            string sql_text = @"select * from table1";
            DB.Open();
            SqlDataAdapter objAdapter = new SqlDataAdapter(sql_text, DB);
            objAdapter.Fill(ds, "test1");
            context.Response.Write(ToJsonTableRun(ds.Tables["test1"]));  //将datatable转化为json格式发送到前端
            DB.Close();
        }

        public string ToJsonTableRun(DataTable dt) {      //json转化方法
            JavaScriptSerializer JavaScriptSerializer = new JavaScriptSerializer();
            JavaScriptSerializer.MaxJsonLength = int.MaxValue;
            ArrayList arrayList = new ArrayList();
            foreach(object obj in dt.Rows){
                DataRow dataRow = (DataRow)obj;
                Dictionary<string,object> dictionary=new Dictionary<string,object>();
                foreach(object obj2 in dt.Columns){
                    DataColumn dataColumn = (DataColumn)obj2;
                    dictionary.Add(dataColumn.ColumnName,dataRow[dataColumn.ColumnName].ToString());
                }
                arrayList.Add(dictionary);
            }
            Hashtable tableMap = new Hashtable();
            tableMap.Add("code", "0");
            tableMap.Add("msg", "");
            tableMap.Add("count", arrayList.Count);
            tableMap.Add("data", arrayList);
            return JavaScriptSerializer.Serialize(tableMap);
        }

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

这样就能展现一个基础的数据表格了，但可能会有一点瑕疵，样式还需要手动修正一下。
css：

 .layui-table th
        {
        	text-align:center;
        	background-color:#009688;
        	color:White;
        	font-weight:bold;
        	position:static;
        	} 
        .layui-table-cell {
        line-height: 20px !important;
        vertical-align: middle;
        height: auto;
        text-overflow: inherit;
        white-space: normal;
        }
        
         .layui-table-view .layui-form-radio
         {
            line-height: 1.4;     //调整layui库里的图片位置，数字大小需要自行尝试
          }

还有一个注意点，导入时请把整个文件夹都原封不动导入进去，不要只导入一个layui.js，不然很多图片资源无法加载，导致看起来很奇怪。