Jquery easyui 网络教程
DataGrid组件包括2个方法检索选择行数据：
? ?
getSelected: 得到第一个选择行的数据，如果没有选择行则返回null否则返回该记录 getSelections:得到全部的选择行的数据，如果元素是记录的话，返回数组数据
创建标记
<table id="tt"></table>
创建 datagrid
$('#tt').datagrid({ title:'Load Data', iconCls:'icon-save', width:600, height:250,
url:'datagrid_data.json', 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} ]] });
用法演示
Jquery easyui 网络教程
得到选择行数据：
var row = $('#tt').datagrid('getSelected'); if (row){
alert('Item ID:'+row.itemid+"\nPrice:"+row.listprice); }
得到全部选择行的itemid:
var ids = [];
var rows = $('#tt').datagrid('getSelections'); for(var i=0; i<rows.length; i++){ ids.push(rows[i].itemid); }
alert(ids.join('\n'));
o
6.4 添加工具栏到DataGrid
这个例子显示了如何添加工具栏：
DataGrid插件有工具栏属性，这个属性可以定义工具栏。工具栏包括定义了下列属性的按钮：
? ? ?
text: 在按钮上显示的文本
iconCls: 定义背景图标显示在按钮的左面的CSS类。 handler: 当用户按下按钮时，处理一些事情的函数
标记
<table id="tt"></table>
jQuery
$('#tt').datagrid({
title:'DataGrid with Toolbar', width:550, height:250,
url:'datagrid_data.json', 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} ]],
toolbar:[{
text:'Add',
iconCls:'icon-add', handler:function(){ alert('add') } },{
text:'Cut',
iconCls:'icon-cut', handler:function(){ alert('cut') } },'-',{
text:'Save',
iconCls:'icon-save', handler:function(){ alert('save') } }] });
o
6.5 DataGrid冻结列
这个例子演示了如何冻结列。当用户水平滚动的时候，冻结列不能滚动出视图。
冻结列，你应该定义frozenColumns属性，这个属性和columns属性相似。
<table id="tt"></table> $('#tt').datagrid({
title:'Frozen Columns', iconCls:'icon-save', width:500, height:250,
url:'datagrid_data.json', frozenColumns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:80}, ]],
columns:[[
{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} ]] });
o
6.6 动态改变DataGrid列
DataGrid列可以使用columns属性定义。如果你想动态改变列，也没问题。改变列你可以重新调用DataGrid方法平且传递新columns属性。 下面定义DataGrid组件
<table id="tt"></table>