jQuery MiniUI 開發教程 表格控件 表格:自定義列(二)

參考示例:數據表格    分頁表格

             
表格列配置集合( columns ),是一個數組,如:[column, column, …]。
其中一個column的配置參數如下表:
  

  
 

使用HTML配置方式,代碼如下

<p id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;"
    url="../data/DataService.aspx?method=SearchEmployees"    
>
    <p property="columns">
        <p type="indexcolumn" ></p>
        <p field="loginname" width="120" headerAlign="center" allowSort="true">員工帳號</p>   
        <p field="name" width="120" headerAlign="center" allowSort="true">姓名</p>                           
        <p field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性別</p>
        <p field="salary" width="100" allowSort="true">薪資</p>                                   
        <p field="age" width="100" allowSort="true">年齡</p>
        <p field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">創建日期</p>               
    </p>
</p> 
   
我們也可以使用Javascript方式,代碼如下:

var grid = new mini.DataGrid();
grid.set({
    url: "../data/DataService.aspx?method=SearchEmployees",
    style: "width:700px;height:280px;",
    columns: [
        { type: "indexcolumn" },
        { header: "員工帳號", field: "loginname", width: 120, headerAlign: "center", allowSort: true },
        { header: "姓名", field: "name", width: 120, headerAlign: "center", allowSort: true },
        { header: "性別", field: "gender", width: 100, align: "center", renderer: onGenderRenderer },
        { header: "薪資", field: "salary", width: 100, allowSort: true },
        { header: "年齡", field: "age", width: 100, allowSort: true },
        { header: "創建日期", field: "createtime", width: 100, headerAlign: "center", allowSort: true, dateFormat: "yyyy-MM-dd" }
    ]
});
grid.render(document.body);
 
Note:無論是使用Javascript還是HTML的方式創建表格,實現功能都是一樣的。
  

 

發佈留言