9、表格控件DataGrid
easyui的列表控件,可以通过指定table的class属性为easyui-datagrid即可实现表格的定义,界面代码如下所示:
|
|
|
|
|
不过为了避免使用脚本定义datagrid导致多次初始化的问题,我们一般只需要指定一个table代码即可,界面如下所示
用户操作" iconcls="icon-view">
而表格控件的数据加载,我们使用javascript进行初始化,初始化后的表格界面显示效果如下所示。
Javascript代码如下所示,其中的width: function () { return document.body.clientWidth * 0.9 }是用来实现宽度自适应的一个操作。
标签,Table
标签的ID是grid
url: '/Menu/FindWithPager',//指向
后台的Action来
获取当前
菜单的信息的Json格式的数据
title: '
功能菜单',iconCls: 'icon-view',height: 650,width: function () { return document.body.clientWidth * 0.9 },nowrap: true,autoRowHeight: false,striped: true,collapsible: true,pagination: true,pageSize: 100,pageList: [50,100,200],rownumbers: true,//sortName: 'ID',//根据某个字段给easyUI排序
sortOrder: 'asc',remoteSort: false,idField: 'ID',queryParams: queryData,//异步
查询的参数
columns: [[
{ field: 'ck',check
Box: true },//选择
{ title: '
显示名称',field: 'Name',width: 200},{ title: '图标',field: 'Icon',width: 150 },{ title: '排序',field: 'Seq',width: 80 },{ title: '
功能ID',field: 'FunctionId',{ title: '
菜单可见',field: 'Visible',{ title: 'Winform窗体类型',field: 'WinformType',width: 400 },{ title: 'Web界面
URL地址',field: 'Url',width: 200 },{ title: 'Web界面的
菜单图标',field: 'WebIcon',width: 120 },{ title: '系统编号',field: 'SystemType_ID',width: 80 }
]],toolbar: [{
id: 'btnAdd',text: '
添加',iconCls: 'icon-add',handler: function () {
ShowAddDialog();//实现
添加记录的
页面
}
},'-',{
id: 'btnEdit',text: '
修改',iconCls: 'icon-edit',handler: function () {
ShowEditOrViewDialog();//实现
修改记录的
方法
}
},{
id: 'btnDelete',text: '
删除',iconCls: 'icon-remove',handler: function () {
Delete();//实现直接
删除数据的
方法
}
},{
id: 'btnView',text: '查看',iconCls: 'icon-table',handler: function () {
ShowEditOrViewDialog("view");//实现查看记录详细信息的
方法
}
},{
id: 'btnReload',text: '刷新',iconCls: 'icon-reload',handler: function () {
//实现刷新栏目中的数据
$("#grid").datagrid("reload");
}
}],onDblClickRow: function (rowIndex,rowData) {
$('#grid').datagrid('uncheckAll');
$('#grid').datagrid('checkRow',rowIndex);
ShowEditOrViewDialog();
}
})
};
对于查询按钮触发的数据后台查询及数据绑定操作,javascript代码如下所示:
查询按钮的的点击事件
function BindSearchEvent() {
//按条件进行
查询数据,首先我们得到数据的值
$("#btnSearch").click(function () {
//得到
用户输入的参数,取值有几种方式:$("#id").combo
Box('getValue'),$("#id").date
Box('getValue'),$("#id").val()
//字段
增加WHC_前缀字符,避免传递如URL这样的Request关键字冲突
var queryData = {
WHC_ID: $("#txtID").val(),WHC_Name: $("#txtName").val(),WHC_Icon: $("#txtIcon").val(),WHC_Seq: $("#txtSeq").val(),WHC_FunctionId: $("#txtFunctionId").val(),WHC_Visible: $("#txtVisible").val(),WHC_WinformType: $("#txtWinformType").val(),WHC_Url: $("#txtUrl").val(),WHC_WebIcon: $("#txtWebIcon").val(),WHC_SystemType_ID: $("#txtSystemType_ID").val()
}
//将值传递给
InitGrid(queryData);
return false;
});
}
通过构造一些查询参数并传递相应的值,后台根据这些参数,从对应控制器的分页方法 FindWithPager 获取相应的分页数据,并绑定到grid控件中。
另外,如果需要在grid里面增加一些图片或者链接什么的,应该如何操作呢?
如下界面所示的效果:
首先需要在初始化代码里面增加列的formatter回调函数,如下所示。
菜单可见',width: 80,formatter: function (val,rowdata,index) {
if (val) {
return '
' + val + '';
} else {
return '
' + val + '';
}
}
},
在formatter回调函数里面添加逻辑代码,判断是否可见,其实就是增加两个图片按钮,但是图片按钮的样式设置,必须在加载数据完毕后才能操作,因此需要在函数里面处理。
如果显示的图片不完整,设置行的自动调整高度属性为true即可。
autoRowHeight: true
10、树形控件
虽然easyui也有Tree控件,不过我较喜欢使用zTree这个树形控件,这个是一个免费的Jquery树控件。
引用代码如下所示: