彩票走势图

jQuery EasyUI使用教程:动态改变数据网格列

原创|使用教程|编辑:龚雪|2016-01-05 09:04:33.000|阅读 806 次

概述:使用'columns'属性可以很容易地定义数据网格列。为了更改列,您可以重新调用datagrid方法并传递一个新的column属性。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

Kendo UI for jQuery——创建现代Web应用程序的最完整UI库!查看详情>>>

<jQuery EasyUI最新试用版免费下载>

使用'columns'属性可以很容易地定义数据网格列。如果您想要动态地改变列,这也非常容易。为了更改列,您可以重新调用datagrid方法并传递一个新的column属性。

创建数据网格

<table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:550px;height:250px"
url="data/datagrid_data.json"
singleSelect="true" iconCls="icon-save">
</table>
$('#tt').datagrid({
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:80},
{field:'attr1',title:'Attribute',width:200},
{field:'status',title:'Status',width:80}
]]
});

运行该网页,您将会看到:

动态改变数据网格列

当您想要更改列时,可以编写一些代码:

$('#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}
]]
});

请记住我们已经定义了其他属性,例如URL、width、height等,因此不需要再一次定义它们,您只需要定义那些需要改变的即可。

动态改变数据网格列

下载该EasyUI示例:

购买最新正版授权!""


标签:HTML5jQueryUI界面HTML5/JS

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP