GridView是什么？
GridView是由Mr.Co开发的一套开源的多功能表格插件，主要用于让页面开发者在开发中节省拼接Table表格和操作Table表格相关复杂操作的开发成本与时间。开发人员可以用GridView快速开发出带有集成编辑、组合表头、分页、表行列操作等一系列功能的GridView。GridView依赖于jQuery类库开发而成，它可以使用在任何Web页面中，比较适合后端项目使用。
主要特点
- 快速：体积小，加载速度快
- 开源：开放源代码，高品质
- 扩展：基于对象库的设计，可根据需求增减功能
- 风格：修改GridView风格非常容易，只需修改一个 CSS 文件
- 兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera
开源日志
- 2016-06：GridView正式开源
快速使用
/**引入皮肤样式**/
<link href="gridview.css" rel="stylesheet">
/**引入jQuery类库**/
<script src="jquery.js"></script>
/**引入gridview类库**/
<script src="gridview.js"></script>
/**页面中新增一个容器元素**/
/**初始化gridview**/
GridView({
container: $('#grid'),
dataSource: [
{ id: '006', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '007', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '008', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '009', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '010', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '006', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '007', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '008', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '009', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '010', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '011', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }
],
columns: [
{ name: '系统编号', field: 'id', order: 0, width: 100, titleAlign: 'center', contentAlign: 'left', display: '' },
{ name: '年龄', field: 'age', order: 2, width: 60, titleAlign: 'center', contentAlign: 'center', link: '/main.html?key={id}' },
{ name: '性别', field: 'sex', order: 4, width: 120, titleAlign: 'center', contentAlign: 'center' },
{ name: '地址', field: 'address', order: 3, width: 160, titleAlign: 'center', contentAlign: 'center' },
{ name: '姓名', field: 'name', order: 1, width: 120, titleAlign: 'center', contentAlign: 'center' },
{ name: '收入', field: 'income', order: 5, width: 180, titleAlign: 'center', contentAlign: 'center' }
]
});
完整类库下载
http://www.mrco.cn/libs/mrco.gridview.zip
转载说明
请尊重作者劳动果实,转载请写明出自http://gridview.mrco.cn. I believe you！
基本表格
GridView({
container: $('#grid'),
dataSource: [
{ id: '006', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '007', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '008', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '009', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '010', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '006', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '007', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '008', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '009', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '010', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '011', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }
],
columns: [
{ name: '系统编号', field: 'id', order: 0, width: 100, titleAlign: 'center', contentAlign: 'left', display: '' },
{ name: '年龄', field: 'age', order: 2, width: 60, titleAlign: 'center', contentAlign: 'center', link: '/main.html?key={id}' },
{ name: '性别', field: 'sex', order: 4, width: 120, titleAlign: 'center', contentAlign: 'center' },
{ name: '地址', field: 'address', order: 3, width: 160, titleAlign: 'center', contentAlign: 'center' },
{ name: '姓名', field: 'name', order: 1, width: 120, titleAlign: 'center', contentAlign: 'center' },
{ name: '收入', field: 'income', order: 5, width: 180, titleAlign: 'center', contentAlign: 'center' }
]
});
编辑表格
GridView({
container: $('#grid'),
//主键ID，如果不设置将会导致行更新操作时获取不到主键ID
dataKeyID: 'id',
dataSource: [
{ id: '006', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '007', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '008', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '009', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '010', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '006', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '007', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '008', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '009', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '010', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '011', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }
],
columns: [
{ name: '系统编号', field: 'id', order: 0, width: 100, titleAlign: 'center', contentAlign: 'left', display: '' },
{ name: '年龄', field: 'age', order: 2, width: 60, titleAlign: 'center', contentAlign: 'center', link: '/main.html?key={id}' },
{ name: '性别', field: 'sex', order: 4, width: 120, titleAlign: 'center', contentAlign: 'center' },
{ name: '地址', field: 'address', order: 3, width: 160, titleAlign: 'center', contentAlign: 'center' },
{ name: '姓名', field: 'name', order: 1, width: 120, titleAlign: 'center', contentAlign: 'center' },
{ name: '收入', field: 'income', order: 5, width: 180, titleAlign: 'center', contentAlign: 'center' },
{ name: '编辑', order: 6, width: 120, titleAlign: 'center', contentAlign: 'center' }
],
editColumn: [
{ name: '删除', type: 'delete', action: '/main.ashx?key={id}', after: '|', visible: true },
{
name: '通过', type: 'common', action: '/main.ashx?key={id}', after: '|', clickCallback: function (actionType, actionURL) {
var _$this = this;
alert(_$this.attr('action'));
}
},
{
name: '更新',
type: 'update',
action: '/main.ashx',
columns: [
{ rowIndex: 1, type: 'hidden', name: '' },
{ rowIndex: 2, type: 'text', name: 'id' },
{ rowIndex: 3, type: 'text', name: 'name' },
{ rowIndex: 4, type: 'text', name: 'name' },
{ rowIndex: 5, type: 'text', name: 'name' },
{ rowIndex: 6, type: 'text', name: 'name' },
{ rowIndex: 7, type: 'text', name: 'name' }
],
after: '|',
append: '更改',
saveAppend: '保存',
clickCallback: function (actionType, actionURL) {
return true; //返回true时，行内会执行colums配置的编辑样式，false时将会被忽略
}
},
{
name: '详情', type: 'common', action: '/detial.html?key={id}&name={name}', visible: function (data) {
//console.log(data);
return false;
}, formatCallback: function (data) {
return '详情'
}, clickCallback: function (actionType, actionURL) {
var _$this = this;
alert(_$this.text());
}
}
],
//行编辑时的回调事件
editUpdateCallback: function (datakey, editData, dataSource) {
console.log(dataSource)
//console.log(datakey);
}
});
分页表格
var _pageIndex = 1,
_dataSrouce = [
{ id: '006', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '007', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '008', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '009', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '010', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '011', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }
];
GridView({
container: $('#grid'),
dataSource: _dataSrouce,
columns: [
{ name: '系统编号', field: 'id', order: 0, width: 100, titleAlign: 'center', contentAlign: 'left', display: '' },
{ name: '年龄', field: 'age', order: 2, width: 60, titleAlign: 'center', contentAlign: 'center', link: '/main.html?key={id}' },
{ name: '性别', field: 'sex', order: 4, width: 120, titleAlign: 'center', contentAlign: 'center' },
{ name: '地址', field: 'address', order: 3, width: 160, titleAlign: 'center', contentAlign: 'center' },
{ name: '姓名', field: 'name', order: 1, width: 120, titleAlign: 'center', contentAlign: 'center' },
{ name: '收入', field: 'income', order: 5, width: 180, titleAlign: 'center', contentAlign: 'center' },
{ name: '编辑', order: 6, width: 120, titleAlign: 'center', contentAlign: 'center' }
],
pages: {
//默认页码
index: _pageIndex,
//每页显示条数
size: 6,
//总条数,这个开发中需要先拿到数据总条数，可以通过AJAX，也可以通过服务端传参
count: 12,
pageClickEvent: function (index/*当前页码*/, grid/*GridView引用对象,用于再次调用绑定表格数据,不调用绑定方法则表格数据不会更新*/) {
_pageIndex = index;
//在这里写请求后台拿数据的Ajax调用
//然后再次调用
//由于是DEMO，我这里直接放了两条JSON数据作为分页回调。
if(index == 2)
grid.ResetBindData([{ id: '001', name: "张三", age: "32", sex: '男', address: "北京市", income: '100W' }, { id: '002', name: "王老五", age: "23", sex: '男', address: "重庆市", income: '100W' }]);
else
grid.ResetBindData(_dataSrouce);
}
}
});
树状表格
GridView({
container: $('#grid'),
dataSource: [
{
id: {
text: '001',
childSize: 5,
group:'001',
level: 0
}, name: "张三", age: "", sex: '', address: "", income: ''
},
{
id: {
text: '002',
childSize: 4,
group:'001',
level: 1
}, name: "张三", age: "", sex: '', address: "", income: ''
},
{
id: {
text: '003',
childSize: 3,
group:'001',
level: 2
}, name: "张三", age: "", sex: '', address: "", income: ''
},
{
id: {
text: '004',
childSize: 0,
group:'001',
level: 3
}, name: "张三", age: "40", sex: '男', address: "北京市", income: '100W'
},
{
id: {
text: '005',
childSize: 0,
group:'001',
level: 3
}, name: "张三", age: "40", sex: '男', address: "北京市", income: '100W'
},
{
id: {
text: '006',
childSize: 0,
group:'001',
level: 3
}, name: "张三", age: "40", sex: '男', address: "北京市", income: '100W'
},
{
id: {
text: '001',
childSize: 5,
group:'002',
level: 0
}, name: "张三", age: "", sex: '', address: "", income: ''
},
{
id: {
text: '002',
childSize: 4,
group:'002',
level: 1
}, name: "张三", age: "", sex: '', address: "", income: ''
},
{
id: {
text: '003',
childSize: 3,
group:'002',
level: 2
}, name: "张三", age: "", sex: '', address: "", income: ''
},
{
id: {
text: '004',
childSize: 0,
group:'002',
level: 3
}, name: "张三", age: "40", sex: '男', address: "北京市", income: '100W'
},
{
id: {
text: '005',
childSize: 0,
group:'002',
level: 3
}, name: "张三", age: "40", sex: '男', address: "北京市", income: '100W'
},
{
id: {
text: '006',
childSize: 0,
group:'002',
level: 3
}, name: "张三", age: "40", sex: '男', address: "北京市", income: '100W'
},
{ id: '006', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '007', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '008', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '009', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '010', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '011', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }
],
columns: [
{ name: '系统编号', field: 'id', order: 0, width: 100, titleAlign: 'center', contentAlign: 'left', display: '' },
{ name: '年龄', field: 'age', order: 2, width: 60, titleAlign: 'center', contentAlign: 'center', link: '/main.html?key={id}' },
{ name: '性别', field: 'sex', order: 4, width: 120, titleAlign: 'center', contentAlign: 'center' },
{ name: '地址', field: 'address', order: 3, width: 160, titleAlign: 'center', contentAlign: 'center' },
{ name: '姓名', field: 'name', order: 1, width: 120, titleAlign: 'center', contentAlign: 'center' },
{ name: '收入', field: 'income', order: 5, width: 180, titleAlign: 'center', contentAlign: 'center' }
]
});
组合表格
GridView({
container: $('#grid'),
//开启组合表头
groupHead: {
//必须设置为true,否则不会生效
isGroup: true,
template: '<tr>' +
' <th rowspan="2">编号</th>' +
' <th colspan="3">个人信息</th>' +
' <th rowspan="2">地址</th>' +
' <th rowspan="2">收入</th>' +
'</tr>' +
'<tr>' +
' <th>姓名</th>' +
' <th>年龄</th>' +
' <th>性别</th>' +
'</tr>'
},
dataSource: [
{ id: '006', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '007', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '008', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '009', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '010', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '006', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '007', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '008', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '009', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '010', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' },
{ id: '011', name: "张三", age: "47", sex: '男', address: "重庆市", income: '100W' }
],
columns: [
{ name: '系统编号', field: 'id', order: 0, width: 100, titleAlign: 'center', contentAlign: 'left', display: '' },
{ name: '年龄', field: 'age', order: 2, width: 60, titleAlign: 'center', contentAlign: 'center', link: '/main.html?key={id}' },
{ name: '性别', field: 'sex', order: 4, width: 120, titleAlign: 'center', contentAlign: 'center' },
{ name: '地址', field: 'address', order: 3, width: 160, titleAlign: 'center', contentAlign: 'center' },
{ name: '姓名', field: 'name', order: 1, width: 120, titleAlign: 'center', contentAlign: 'center' },
{ name: '收入', field: 'income', order: 5, width: 180, titleAlign: 'center', contentAlign: 'center' }
]
});
初始化参数配置
//表格容器
container: $('body')
//表格唯一ID
id: 'gridView' + parseInt(100000000 * Math.random())
//是否隐藏表格头部
hidenHead: false
//是否为组合表头
groupHead: {
//如果为组合表头必须设置为true
isGroup: false,
template: $('#gridview_head').html()
},
//表格行checkbox是否为单选,false : 非单选 true : 单选
singleSeleted: false
//表格默认样式名称
className: 'gridView'
//行间隔-高亮变色行样式名称
columnHighClassName: 'highBack'
//主键ID，如果不设置将会导致行更新操作时获取不到主键ID
dataKeyID: 'id'
//当数据不够分页条数行的时候填充空白行
columnFilling: false
//是否需要显示表格行checkbox可选功能, false : 不显示 true : 显示
selectedColumn: true
//是否添加行序号, false : 不显示 true : 显示
columnNo: true
//行合并,默认为全部不合并
mergeRows: {
//是否合并 false : 不合并 true : 合并
isMerge: false,
//需要合并的列索引,不给此属性，默认合并所有列
index: [0, 1, 2, 3, 4, 5]
}
//数据表格格式设置，表格数据显示规则就靠它了
columns:[
{
//需要映射的字段Key
field:'name',
//表格头部标题
name:'姓名'，
//表格列排序，数字越小越靠前
order:1,
//表格宽度
width:200,
//表格头部标题显示位置,属性与CSS中的text-align属性一致
titleAlign:'center',
//表格内容部分显示位置,属性与CSS中的text-align属性一致
contentAlign:'center',
//控制该列是否显示 block 显示 none 不显示
display:'none',
//当该属性存在,clickCallback不存在的时候，当前元素会变成一个超链接
link:'http://www.baidu.com',
//监听当前元素的点击事件
clickCallback:function(){
//当前元素对象
var _$this = $(this);
},
//返回格式化后的数据信息显示到表格中
formatCallback: function ($this) {
return $this.text() == '张三' ? '张三好帅' : '王五好帅';
}
}
]
//编辑列设置属性配置
editColumn:[
{
//操作名称
name: '删除',
//操作类型，预定义类型有 delete(删除)、update(表格编辑)、common(自定义)三种类型
type: 'delete',
//当type为delete、update时候需要设置action的ajax请求地址,传参方式在{}括号中填写相对于的数据源中所映射的Key名称便可
action: '/main.ashx?key={id}',
//是否显示操作项
visible: true,
//在操作名称后面追加其它HTML元素，这里我用于做间隔
after: '|',
//在当前操作项中追加一个ICON操作图片,也可以追加其它HTML元素
append: '
',
//监听当前编辑元素的点击事件
clickCallback:function (actionType, actionURL) {
//actionType 获取当前的操作type, 比如delete或者update
//actionURL 获取到解析后的action地址，用于ajax请求
//this为当前编辑元素对象,你拿到它可以做其它相关DOM操作
var _$this = this;
},
//返回格式化后的数据信息替换操作名称
formatCallback:function (data) {
//data 当前一行的data数据
if (data.id == '001')
return '恢复';
else
return '删除';
}
},
{
//操作名称
name: '更新',
//操作类型，预定义类型有 delete(删除)、update(表格编辑)、common(自定义)三种类型
type: 'update',
//定义编辑时显示的表单类型
columns: [
{
//现在的列索引位置
rowIndex: 1,
//表单类型,可以是所以表单类型,比如select、text、passwod等等
type: 'hidden',
//表单名称
name: 'hidID'
},
{
//现在的列索引位置
rowIndex: 2,
//表单类型,可以是所以表单类型,比如select、text、passwod等等
type: 'select',
//表单名称
name: 'ddlCity',
//select异步请求数据源的ajax地址
action: '/main.ashx',
//数据对象
dataSource: [
{ id: '010', name: '北京市' },
{ id: '023', name: '重庆市' }
],
//select绑定的value
dataKeyID: 'id',
//select绑定的text
dataKeyText: 'name'
}
],
after: '|',
append: '
',
saveAppend: '',
clickCallback: function (actionType, actionURL) {
alert('点击更新');
//返回true时，行内会执行colums配置的编辑样式，false时将会被忽略
return true;
}
}
]
//分页属性配置
pages:{
//是否显示分页, block或者不设置display属性 = 显示 none = 不显示
display: 'none',
//默认页码
index: 0,
//每页显示条数
size: 8,
//总条数
count: 24,
pageClickEvent: function (index/*当前页码*/, grid/*GridView引用对象,用于再次调用绑定表格数据,不调用绑定方法则表格数据不会更新*/) {
//在这里写请求后台拿数据的Ajax调用
//然后再次调用
grid.ResetBindData([{ id: '001', name: "张三", age: "32", sex: '男', address: "北京市", income: '100W' }, { id: '002', name: "王老五", age: "23", sex: '男', address: "重庆市", income: '100W' }]);
}
}
//行单击监听方法
columnClickHandle:function(){
var _$this = $(this)
}
//行双击监听方法
columnDBClickHandle:function(){
var _$this = $(this)
}
//行复选框的change事件监听方法
checkboxChangeHandle:function(){
var _checked = data.checked,
_value = data.value;
}