表格列配置集合( columns ),是一个数组,如:[column, column, ...]。
其中一个column的配置参数如下表:
Name | Type | Description | Default |
---|---|---|---|
header | String | 表头列文本 | |
field | String | 单元格值字段 | |
name | String | 列标识名称 | |
width | Number | 列宽度 | |
headerAlign | String | 表头列文本位置。left/center/right。 | left |
align | String | 单元格文本位置。left/center/right。 | left |
headerCls | String | 表头列样式类。 | |
cellCls | String | 单元格样式类 | |
headerStyle | String | 表头列样式 | |
cellStyle | String | 单元格样式 | |
editor | Object | 单元格编辑器。 | |
renderer | Function | 单元格绘制处理函数,同drawcell事件。 | |
allowMove | Boolean | 是否可移动表头列。 | true |
allowResize | Boolean | 是否拖拽调节表头列宽度。 | true |
使用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的方式创建表格,实现功能都是一样的。