第一篇学的是做一个管理的外框，接着就是数据datagrid绑定了，这里我用asp.netmvc3来做的，主要就是熟悉属性、方法。
打开easyui的demo 就可以看到如下一段代码：
和上篇一样class="easyui-datagrid", data-options="..."，这是一样的,其他我在网上查了查，并做了整理
DataGrid 属性参数名
类型
描述
默认值
title
string
Datagrid面板的标题
null
iconCls
string
在面板上通过一个CSS类显示16x16图标。
null
border
boolean
设置面板是否具有边框
TRUE
width
number
datagrid面板的宽度
auto
height
number
datagrid面板的高度
auto
columns
array
DataGrid列配置对象
null
frozenColumns
array
冻结的列，被现实在左边
null
striped
boolean
设置是否让单元格显示条纹。默认false。
FALSE
method
string
通过该方法类型请求远程数据。默认post。
post
nowrap
boolean
是否包裹数据，默认为包裹数据显示在一行
TRUE
idField
string
标识字段，或者说主键字段
null
url
string
请求数据的URL.(josn格式)
null
loadMsg
string
加载数据时显示的信息
PRocessing, please wait …
pagination
boolean
是否显示分页工具栏
FALSE
rownumbers
boolean
是否显示行号
FALSE
singleSelect
boolean
是否单行选定
FALSE
fit
boolean
是否自动适应父容器
FALSE
pageNumber
number
分页初始化行号
1
pageSize
number
初始化分页大小
10
pageList
array
分页大小选择列
[10,20,30,40,50]
queryParams
object
请求数据时额外发送的参数
{}
sortName
string
排序列
null
sortOrder
string
升序还是降序 'asc' 或者 'desc'.
asc
toolbar
string
工具栏(绑定新增，查询按钮...)
null
Column 属性
名称
类型
描述
默认值
title
string
列字段要现实的名称
undefined
field
string
列字段
undefined
width
number
宽度
undefined
rowspan
number
单元格行数
undefined
colspan
number
单元格列数
undefined
align
string
文本对齐方式，同align属性.
undefined
sortable
boolean
是否可以被排序.
undefined
checkbox
boolean
是否具有多选框
undefined
formatter
class
方法
注：formatter：function (value, rowData, rowIndex){}
//value 这个field绑定的值 rowData 这行数据内容 rowIndex 选择行的行号
columns: [[
{ field: 'Id', title: '编号', width: 100, sortable: true },
{ field: 'ClassName', title: '类型名称', width: 150, sortable: true },
{ field: 'ClassDescribe', title: '描述', width: 150, sortable: true },
{ field: 'Id', title: '操作', width: 150, sortable: true, formatter: formatOper
function formatOper(index) {
return "<a href=\"javascript:void(0)\" onclick=\"UsDelete(" + index + ")\">删除</a>";
}
Events（事件）
Name
Parameters
Description
onLoadSuccess
none
调用远程数据成功是激活
onLoadError
none
装载错误时激活
onClickRow
rowIndex , rowData
点击一行时激活，参数包括：
rowIndex:点击的行数，从0开始
rowData: 当前行的数据
onDblClickRow
rowIndex ,rowData
双击一行是触发，参数包括:
rowIndex:点击的行数，从0开始
rowData: 当前行的数据
onSortColumn
sort,order
对一列进行排序时激活,参数包括:
sort:排序字段名称
order: 排序规则，升序，降序
onSelect
rowIndex,rowData
选中一行时激活，参数有:
rowIndex:选中的行数
rowData: 数据
onUnselect
rowIndex,rowData
取消选中时激活，参数：
rowIndex:选中的行数
rowData: 数据
onDblClickRow: function (rowIndex, rowData) { //双击事件
}
Methods（方法）NameParameterDescriptionoptions
none
返回所有属性
resize
none
重置大小布局
reload
none
重新加载数据
fixColumnSize
none
调整列的大小
loadData
param
装载数据，以前的数据会被移除
getSelected
none
返回选中的行，没有则返回空
getSelections
none
返回所有的行，空则返回空数组
clearSelections
none
取消所有选中
selectRow
index
选中一行，参数为行号
selectRecord
idValue
根据主键查询出一条记录
unselectRow
index
取消选中一行
刷新datagird的两种方法：
1.grid.datagrid('reload');
2.grid.datagrid({ url:'/Admin/SeachProductTypeInfo?Id='+ 6});//带参数查询（刷新datagrid数据）
代码如下：
<divid="grid"class="easyui-grid"></div><divid="EditDig"class="easyui-dialog"title="用户修改"style="width:400px;height:350px;"closed="true"id="EditForm"><divid="info"closed="true"class="easyui-window"></div></div><scripttype="text/Javascript">$(function() {
$("#grid").datagrid({
title:"用户列表",
iconCls:'icon-save',
methord:'get',
url:"/CrmUser/GetUserList/",
sortName:'Id',
sortOrder:'desc',
idField:'Id',
border:true,
width:1000,
height:300,
columns: [[
{ field:"LoginEmail", title:"登陆邮箱", sortable:true, width:100},
{ field:"PassWord", title:"密码", sortable:true, width:100},
{ field:"TrueName", title:"真实姓名", sortable:true, width:100},
{ field:"Phone", title:"手机号码", sortable:true, width:100},
{ field:"UserCard", title:"身份证", sortable:true, width:100},
{ field:"NickName", title:"昵称", sortable:true, width:100},
{ field:"QQ", title:"QQ号码", sortable:true, width:100},
{ field:"LastLoginTime", title:"最后登陆时间", sortable:true, width:100, formatter: formatDatebox },
{ field:"CreateOn", title:"创建时间", sortable:true, width:100, formatter: formatDatebox },
{ field:"UpdateBy", title:"修改人", sortable:true, width:100},
{ field:"UpdateOn", title:"修改时间", sortable:true, width:100, formatter: formatDatebox },
{ field:'Id', title:'操作', width:100, align:'center', formatter:function(value,rowIndex) {vars='<a href="#" onclick="view(\''+value+'\')">查看</a>';vare='<a href="#" onclick="edit(\''+value+'\')">编辑</a>';vard='<a href="#" onclick="del(\''+value+'\')">删除</a>';returns+e+d;
}
}
]],//frozenColumns: [[//{ field: "CreatorId",title:"创建人ID",sortable:true,width:100 }//]],toolbar: [{
text:'新增',
iconCls:'icon-add',
handler: edit
},'-', {
text:'用户名: <input type="text" id="username" style="height:18px; width: 100px;line-height: 18px; "/>'},'-', {
text:'邮件: <input type="text" id="email" style="height:18px; width: 100px;line-height: 18px; "/>'},'-', {
text:'查找',
iconCls:'icon-search',
handler: search
}],
pagination:true,
fit:true,
fitColumns:true,
singleSelect:true});
});//查询functionsearch() {
$("#grid").datagrid({
url:"/CrmUser/GetUserList/?userName="+$("#username").val()+"&email="+$("#email").val(),
});
}//查看functionview(pId) {
}//修改functionedit(pId) {
}//删除functiondel(pId) {
}//做时间转换functionformatDatebox(value) {if(value==null||value=='') {return'';
}vardt;if(valueinstanceofDate) {
dt=value;
}else{
dt=newDate(value);if(isNaN(dt)) {
value=value.replace(/\/Date\((-?\d+)\)\//,'$1');//标红的这段是关键代码，将那个长字符串的日期值转换成正常的JS日期格式dt=newDate();
dt.setTime(value);
}
}returndt.format("yyyy-MM-dd");//这里用到一个javascript的Date类型的拓展方法，这个是自己添加的拓展方法，在后面的步骤3定义}
Date.prototype.format=function(format) {varo={"M+":this.getMonth()+1,//month"d+":this.getDate(),//day"h+":this.getHours(),//hour"m+":this.getMinutes(),//minute"s+":this.getSeconds(),//second"q+": Math.floor((this.getMonth()+3)/3),//quarter"S":this.getMilliseconds()//millisecond};if(/(y+)/.test(format))
format=format.replace(RegExp.$1,
(this.getFullYear()+"").substr(4-RegExp.$1.length));for(varkino)if(newRegExp("("+k+")").test(format))
format=format.replace(RegExp.$1,
RegExp.$1.length==1?o[k] :
("00"+o[k]).substr((""+o[k]).length));returnformat;
};functiond_close() {
$('#EditDig').dialog('close');
};</script>
View Code
来自为知笔记(Wiz)
附件列表