自定義表格的渲染

開發工具與關鍵技術： VS ， ；自定義表格渲染
作者：劉佳明
撰寫時間：2019年 6 月 3 日

之前有編輯過運用layui渲染出table表格，本篇文章是不使用layui的方法，自己在HTML中使用標籤來構建出一個table的表格
以下是經常使用的layuitable表格渲染

tabStudent = layuiTable.render({
    elem: "#tabStudent",//html table id
    //url: "/PateOnt/SelectPateOnt/",//數據接口
    cols: [[ //表頭
    { type: 'checkbox', fixed: 'left' },//複選框列,fixed:'left' 將列固定在左邊
    { type: 'numbers', title: '序號' },//序號列，title設定標題名稱
    { field: 'employeeID', title: 'employeeID', hide: true },
                       //{ field: 'UserID', title: 'UserID', hide: true },//hide:true 隱藏列
    { field: 'employeeName', title: '員工姓名' },
    { field: 'employeeNum', title: '員工編號' },
    { field: 'telphone', title: '電話號碼' },
    { field: 'address', title: '家庭住址' },                        
    { title: '操作', templet: setOperate, width: 148, align: 'center', fixed: 'right' }//width: 160 指定寬度，align 指定對其方式
                    ]],
     page: {
            limit: 10,//指定每頁顯示的條數
            limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每頁條數的選擇項
          }, //開啓分頁
    data: [],//加載本地數據
                 
          //toolbar: '#tabStudentToolbar',
     })

直接在HTML中記錄一個table的標籤。然後在js 的代碼中把表格渲染出現，
在這裏，小編使用同一個數據庫，相同字段，不同的渲染方式構建了另外一種table表格的渲染，同樣可以實現將數據庫中的數據傳輸到table中 顯示，
HTML中渲染table
注意，HTML中渲染表格，數據查詢數據的鏈接方法，是在標籤中直接引入；

<table class="layui-table" lay-data="{height:315,url:'/PateOnt/SelectPateOnt', page:true, id:'tableInfo'}" lay-filter="test">
          <thead>
     <tr>
            <th lay-data="{field:'employeeNum', width:80, sort: true}">ID</th>
            <th lay-data="{field:'employeeName', width:80}">用戶名</th>
            <th lay-data="{field:'telphone', width:80, sort: true}">電話</th>
            <th lay-data="{field:'address'}">城市</th>
            <th lay-data="{field:'employeeName'}">簽名</th>
            <th lay-data="{field:'address', width:80, sort: true}">聯繫地</th>
   
    	 </tr>
  	  </thead>
 	</table>

以下是兩種的效果圖對比：
Layuitable表格渲染：

使用HTML中定義的table標籤來定義的table表格：

兩種方法都可以接受數據的數據，並將它們顯示在table表格中