EasyUI-datagrid

初始化基本绑定：

<script>
$(function(){
$('#tt_user_info').datagrid({
fit: true,
url: '../Data/datagrid_data.json',
method: 'get',
pagination: true,//分页
rownumbers: true,//显示行数
fitColumns: true,//自动使列适应表格宽度
singleSelect: true,//单行选择
pageSize: 50,//默认分页条数
columns: [[
{ field: 'code', title: '编号', width: 100 },
{ field: 'name', title: '名称', width: 100 },
{ field: 'rolename', title: '角色', width: 100 },
{ field: 'username', title: '帐号', width: 100 },
{ field: 'password', title: '密码', width: 100, align: 'right' }
]],
toolbar: '#tb_user_info'
});
})
</script>

<table id="tt_user_info"></table>
<div id="tb_user_info" class="toobar-user">
<a id="btn_user_add" href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" >添加</a>
<a id="btn_user_edit" href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true">修改</a>
<a id="btn_user_remove" href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true">删除</a>
<input class="easyui-validatebox" type="text" />
<a id="btn_user_search" href="#" class="easyui-linkbutton" iconcls="icon-search" plain="true">查询</a>
</div>

参考：http://www.zi-han.net/case/easyui/datagrid&tree.html#datagrid

基本用法：

获取取选中行某列的值：

var oData = $('#tt_user_info').datagrid('getSelected');
var code = oData.code;
alert(code);

刷新：

$('#btn_user_reload').click(function () {
$('#tt_user_info').datagrid('reload');
});

查询（两种方式）：load,载入并显示第一页的记录，如果传递了'param'参数，它将会覆盖查询参数属性的值。通过传递一些参数，通常做一个查询，这个方法可以被称为从服务器加载新数据;

reload,重载记录，跟'load'方法一样但是重载的是当前页的记录而非第一页;

$('#btn_user_search').click(function () {
// $('#tt_user_info').datagrid('load', { username: $('#txt_search').val(),code:"2" });
$('#tt_user_info').datagrid("options").queryParams = {
username: $('#txt_search').val(),
code: "2"
};
$('#tt_user_info').datagrid('reload');
$('#tt_user_info').datagrid("options").queryParams = { code: 1 };//重新绑定参数
});

绑定一列里面包含多列的方式（注意列名不能重复）：

var students = {
total: 2,
rows: [{
name: "张三",
age: 20,
name2: "XXOO大学",
address: "犄角旮旯222号"

},
{
name: "李四",
age: 19,
name2: "SB大学",
address: "犄角旮旯2B号"

}
]
};
var jsonText = JSON.stringify(students);
var oJson = JSON.parse(jsonText);
$('#student').datagrid({
columns: [[
{ field: 'name', title: '名称',rowspan:2, width: 100 },
{ field: 'age', title: '年龄', rowspan:2,width: 100 },
{ title: '学校', colspan: 2 }
],
[
{ field: 'name2', title: '学校名称', width: 100 },
{ field: 'address', title: '学校地址', width: 100 }
]
]
});

$('#student').datagrid('loadData', oJson);

如果只是希望把包含列的信息显示在该列下的话，也可以这么做；

var students = {
total: 2,
rows: [{
name: "张三",
age: 20,
school: {
name: "XXOO大学",
address: "犄角旮旯222号"
}
},
{
name: "李四",
age: 19,
school: {
name: "SB大学",
address: "犄角旮旯2B号"
}
}
]
};
var jsonText = JSON.stringify(students, function (key, value) {
if (key == "school") {
return value.name + value.address;
} else {
return value;
}
});
alert(jsonText);
var oJson = JSON.parse(jsonText);
alert(oJson);
$('#student').datagrid({
columns: [[
{ field: 'name', title: '名称', width: 100 },
{ field: 'age', title: '年龄', width: 100 },
{ field: 'school', title: '学校', width: 300 }
]]
});
$('#student').datagrid('loadData', oJson);

注意是把字面量对象通过JSON.stringify的第二个过滤参数修改了school的值，如果直接绑定的json的话会是下图的结果