easyui中datagrid用法,加载table数据与标题
2016-09-02 09:57
453 查看
加载标题写法:
多行标题:columns: [[
columns: [[
{ field: 'itemid', title: 'Item ID', rowspan: 2, width: 80, sortable: true },
{ field: 'productid', title: 'Product ID', rowspan: 2, width: 80, sortable: true },
{ title: 'Item Details', colspan: 4 }
], [
{ field: 'listprice', title: 'List Price', width: 80, align: 'right', sortable: true },
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', sortable: true },
{ field: 'attr1', title: 'Attribute', width: 100 },
{ field: 'status', title: 'Status', width: 60 }
]]
单行标题用Js实现:
$('#tt').datagrid({
columns: [[
{ field: 'itemid', title: 'Item ID', width: 80 },
{ field: 'productid', title: 'Product ID', width: 80 },
{ field: 'listprice', title: 'List Price', width: 80, align: 'right' },
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right' },
{ field: 'attr1', title: 'Attribute', width: 100 },
{ field: 'status', title: 'Status', width: 60 }
]]
});
实现一个table的数据加载例子:
静态:
var data_ = [{
"dataindex0": "1",
"dataindex1": "Y08",
"dataindex2": "Y00000000158",
"dataindex3": "注",
"dataindex4": "Z",
"dataindex5": "注",
"dataindex6": "250",
"dataindex7": "东北厂",
"dataindex8": "国",
"dataindex9": "123123",
"dataindex10": null,
"dataindex11": null,
"dataindex12": null,
"dataindex13": null
},
{
"dataindex0": "1",
"dataindex1": "Y08",
"dataindex2": "Y00000000158",
"dataindex3": "注",
"dataindex4": "Z",
"dataindex5": "注",
"dataindex6": "250",
"dataindex7": "东北厂",
"dataindex8": "国",
"dataindex9": "123123",
"dataindex10": null,
"dataindex11": null,
"dataindex12": null,
"dataindex13": null
}];
方法一:
$('#dg').datagrid({
fit: true,
checkOnSelect: true,
selectOnCheck: true,
singleSelect: true,
fitColumns: true,
data:data_,
//pageSize:100,
//pagination:true,
columns: [[
{ field: 'dataindex0', title: 'dataindex0', width: 80 },
{ field: 'dataindex1', title: 'dataindex1', width: 80 },
{ field: 'dataindex2', title: 'dataindex2', width: 80 },
{ field: 'dataindex3', title: 'dataindex3', width: 80 },
{ field: 'dataindex4', title: 'dataindex4', width: 80 },
{ field: 'dataindex5', title: 'dataindex5', width: 80 },
{ field: 'dataindex6', title: 'dataindex6', width: 80 },
{ field: 'dataindex7', title: 'dataindex7', width: 80 },
{ field: 'dataindex8', title: 'dataindex8', width: 80 },
{ field: 'dataindex9', title: 'dataindex9', width: 80 }
]]
});
方法二:
$('#dg').datagrid({
fit: true,
checkOnSelect: true,
selectOnCheck: true,
singleSelect: true,
fitColumns: true,
//pageSize:100,
//pagination:true,
columns: [[
{ field: 'dataindex1', title: 'dataindex1', width: 80 },
{ field: 'dataindex2', title: 'dataindex2', width: 80 },
{ field: 'dataindex3', title: 'dataindex3', width: 80 },
{ field: 'dataindex4', title: 'dataindex4', width: 80 },
{ field: 'dataindex5', title: 'dataindex5', width: 80 },
{ field: 'dataindex6', title: 'dataindex6', width: 80 },
{ field: 'dataindex7', title: 'dataindex7', width: 80 },
{ field: 'dataindex8', title: 'dataindex8', width: 80 },
{ field: 'dataindex9', title: 'dataindex9', width: 80 },
{ field: 'dataindex10', title: 'dataindex10', width: 80 }
]]
});
多行标题:columns: [[
columns: [[
{ field: 'itemid', title: 'Item ID', rowspan: 2, width: 80, sortable: true },
{ field: 'productid', title: 'Product ID', rowspan: 2, width: 80, sortable: true },
{ title: 'Item Details', colspan: 4 }
], [
{ field: 'listprice', title: 'List Price', width: 80, align: 'right', sortable: true },
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', sortable: true },
{ field: 'attr1', title: 'Attribute', width: 100 },
{ field: 'status', title: 'Status', width: 60 }
]]
单行标题用Js实现:
$('#tt').datagrid({
columns: [[
{ field: 'itemid', title: 'Item ID', width: 80 },
{ field: 'productid', title: 'Product ID', width: 80 },
{ field: 'listprice', title: 'List Price', width: 80, align: 'right' },
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right' },
{ field: 'attr1', title: 'Attribute', width: 100 },
{ field: 'status', title: 'Status', width: 60 }
]]
});
实现一个table的数据加载例子:
静态:
var data_ = [{
"dataindex0": "1",
"dataindex1": "Y08",
"dataindex2": "Y00000000158",
"dataindex3": "注",
"dataindex4": "Z",
"dataindex5": "注",
"dataindex6": "250",
"dataindex7": "东北厂",
"dataindex8": "国",
"dataindex9": "123123",
"dataindex10": null,
"dataindex11": null,
"dataindex12": null,
"dataindex13": null
},
{
"dataindex0": "1",
"dataindex1": "Y08",
"dataindex2": "Y00000000158",
"dataindex3": "注",
"dataindex4": "Z",
"dataindex5": "注",
"dataindex6": "250",
"dataindex7": "东北厂",
"dataindex8": "国",
"dataindex9": "123123",
"dataindex10": null,
"dataindex11": null,
"dataindex12": null,
"dataindex13": null
}];
方法一:
$('#dg').datagrid({
fit: true,
checkOnSelect: true,
selectOnCheck: true,
singleSelect: true,
fitColumns: true,
data:data_,
//pageSize:100,
//pagination:true,
columns: [[
{ field: 'dataindex0', title: 'dataindex0', width: 80 },
{ field: 'dataindex1', title: 'dataindex1', width: 80 },
{ field: 'dataindex2', title: 'dataindex2', width: 80 },
{ field: 'dataindex3', title: 'dataindex3', width: 80 },
{ field: 'dataindex4', title: 'dataindex4', width: 80 },
{ field: 'dataindex5', title: 'dataindex5', width: 80 },
{ field: 'dataindex6', title: 'dataindex6', width: 80 },
{ field: 'dataindex7', title: 'dataindex7', width: 80 },
{ field: 'dataindex8', title: 'dataindex8', width: 80 },
{ field: 'dataindex9', title: 'dataindex9', width: 80 }
]]
});
方法二:
$('#dg').datagrid({
fit: true,
checkOnSelect: true,
selectOnCheck: true,
singleSelect: true,
fitColumns: true,
//pageSize:100,
//pagination:true,
columns: [[
{ field: 'dataindex1', title: 'dataindex1', width: 80 },
{ field: 'dataindex2', title: 'dataindex2', width: 80 },
{ field: 'dataindex3', title: 'dataindex3', width: 80 },
{ field: 'dataindex4', title: 'dataindex4', width: 80 },
{ field: 'dataindex5', title: 'dataindex5', width: 80 },
{ field: 'dataindex6', title: 'dataindex6', width: 80 },
{ field: 'dataindex7', title: 'dataindex7', width: 80 },
{ field: 'dataindex8', title: 'dataindex8', width: 80 },
{ field: 'dataindex9', title: 'dataindex9', width: 80 },
{ field: 'dataindex10', title: 'dataindex10', width: 80 }
]]
});
相关文章推荐
- EasyUI DataGrid使用Json加载不了数据
- 对easyui datagrid 进行扩展拉动滚动条到底部自动加载数据《二》
- 谈谈easyui datagrid 的数据加载(转)
- EasyUi的datagrid数据加载
- 解决easyui datagrid加载数据时,checkbox列没有根据checkbox的值来确定是否选中
- easyui datagrid combobox 加载固定数据
- 解决easyui datagrid加载数据时,checkbox列没有根据checkbox的值来确定是否选中
- easyui datagrid 的数据加载
- easyui datagrid 的数据加载
- 使用easyui在ie浏览器下,treegrid,datagrid加载数据很慢,ie浏览器卡住原因
- easyui datagrid 的数据加载
- 对easyui datagrid 进行扩展拉动滚动条到底部自动加载数据一
- EasyUI datagrid 改变url属性 实现动态加载数据
- 扩展easyui.datagrid,实现加载数据遮罩效果代码
- [转载]再次谈谈easyui datagrid 的数据加载
- easyUI datagrid 数据加载时判断是否默认勾选checkbox
- 为easyui组件datagrid在加载完之后追加新的数据行
- 对easyui datagrid 进行扩展拉动滚动条到底部自动加载数据《二》
- 再次谈谈easyui datagrid 的数据加载
- 解决easyUI 1.4.1 dataGrid加载数据慢的问题