grid

grid

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  78 Posts :: 0 Stories :: 62 Comments :: 0 Trackbacks
表格:自定义列
                
                      

参考示例数据表格    分页表格


              

表格列配置集合( columns ),是一个数组,如:[column, column, ...]。
其中一个column的配置参数如下表:
   

   

 

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

<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;" 
    url="../data/DataService.aspx?method=SearchEmployees"     
>
    <div property="columns">
        <div type="indexcolumn" ></div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
        <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>                            
        <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
        <div field="salary" width="100" allowSort="true">薪资</div>                                    
        <div field="age" width="100" allowSort="true">年龄</div>
        <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
    </div>
</div>  
   

我们也可以使用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的方式创建表格,实现功能都是一样的。
   

posted on 2012-11-01 16:08 nikofan 阅读(5121) 评论(1)  编辑  收藏

Feedback

# re: jQuery MiniUI 开发教程 表格控件 表格:自定义列(二) 2016-06-06 18:29 superglg738@163.com
你好,请问miui的 javascript 方式有教程吗?demo中全是html的写法。  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: