表格:自定义列
参考示例:
数据表格 分页表格
表格列配置集合( 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" idField="id" allowResize="true">
<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的方式创建表格,实现功能都是一样的。
分享到:
相关推荐
本文将详细介绍jquery miniui 教程 表格控件 合并单元格的应用,需要的朋友可以参考下
jQuery MiniUI - 快速开发WebUI。 它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。 使用MiniUI,开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、...
利用jquery miniui会让网页编写更加方便简单,还有jquery mini 的使用手册,能够很好的帮助使用,同时还有一些写好的实例可供参考。
MiniUI - 专业WebUI控件库 1.快速开发,减少50%代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。 2.丰富组件库,高性能、低内存 3.支持 IE6+、FireFox、Chrome
jQuery MiniUI 实例下载 js web框架,简单易懂 实例 代码 API 等
jQuery miniui_php 绑定表单 绑定控件 创建表单 加载表单 清除表单 重置表单
jQuery AJAX表格控件(初版)源码 测试版 JQUERY 实现的AJAX表格操作控件 设计上需要改进 初步功能已实现 边个实现了数据库的添加 编辑 删除等基本功能 详细请查看代码
JQuery基础教程之第五章后面章节请看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery...
VS2008 编写 基于Jquey ajax 开发的表格控件 能够自定义表头,编辑、添加、删除、统计 数据全都是 json 格式 还能实现 在 表格里插入时间
jQuery设置表格列字段筛选改变代码,jQuery设置表格列字段筛选改变代码(html)
jQuery MiniUI-Web快速开发框架,包含datagrid、TreeView、button等多种控件,快速开发,减少50%代码量,组件标签化,学习曲线低,支持 Java、.NET、PHP,支持 IE6+、FireFox、Chrome
dotNetFlexGrid是一款asp.net原生的异步表格控件,它的前身是Jquery FlexiGrid插件,我们重构了FlexiGrid的大部分Javascript代码,使其工作的更有效率,BUG更少;同时将其封装为asp.net 控件,提供了简单易用的使用...
通过五个jquery插件联合调用的方式,来形成可以批量上传图片。没有用ajax,而是采取iframe来做图片无刷新上传。
一款很强大的表格控件,支持表格的world excel pdf 等格式导出,支持分页,语言国际化
这个控件是jquery封装的一款控件,最初的时候里面东西很少.只是用来显示数据使用的, 传输数据的格式有两种 xml 和 json ,做系统网站上比较用的多, 这个控件也比较好看和实用, 我在网上看到了很多功能但是都很散, 我...
jQuery基于分页插件,动态获取表格数据,三行三列,自定义分页样式代码。
jQuery AJAX表格控件(初版)源码 测试版 JQUERY 实现的AJAX表格操作控件 设计上需要改进 初步功能已实现 边个实现了数据库的添加 编辑 删除等基本功能 详细请查看代码
jquery插件--表格分页。
jQuery Datatable 自定义列1