引入 jquery.hdgrid.js 。 引入 mygrid.css。
简单配置如下:
$(".gridContainer").hdgrid({
url: 'testData.txt',
showColNum: true,
checkBox: false,
showPage: true,
autoLoad: true,
colModel: [{name: 'col1', header: '列一',} ,{name: 'col2', header: '列二', sortable: true} ,
{name: 'col3', header: '列三'},{name: 'col4', header: '列四'},
{name: 'col5', header: '列五'},{name: 'col6', header: '列六',
hidden: false},{name: 'col7', header: '列七'}]
});
url
: 请求数据的路径
showColNum
: (true/false)是否显示行号
checkBox
: (true/false)是否多选
showPage
: (true/false)是否显示分页项
autoLoad:
(true/false)是否自动加载
只支持json格式的数据 如:
{"pageNo":"1","pageCount": 15,"pageSize":"20","result":[
pageNo: 当前页码 pageCount: 总页数 pageSize:每页的记录数 result: 记录
{"col1":"1","col2":"设备1","col3":"RTU","col4":"1","col5":"火星","col6":"v1", "col7":"com1"},
{"col1":"1","col2":"设备1","col3":"RTU","col4":"1","col5":"火星","col6":"v1", "col7":"com1"},
{"col1":"1","col2":"设备1","col3":"RTU","col4":"1","col5":"火星","col6":"v1", "col7":"com1"},
{"col1":"1","col2":"设备1","col3":"RTU","col4":"1","col5":"火星","col6":"v1", "col7":"com1"}
]
}