easyui入门之dataGrid(一)

最近在做一个项目，主要考虑到表单功能和界面简洁等因素，选择了easyui作为开发框架。easyui有丰富且功能强大的插件库，其中dataGrid的功能尤为重要，下面我就介绍下如何用dataGrid实现下面图示的功能。

我的这个页面中，主要包含了dataGrid的以下几个功能：

一异步从数据库获取数据，并绑定dataGrid的功能。

二实现dataGrid的sql语句或者存储过程分页的功能，实现每次查询只读取当前页的数据(这里本人使用的是Oracle11g数据库)。

三使用过滤（filter）功能，这里datagrid-filter.js插件，在表头增加了过滤行，而且给审核时间列做了可以根据条件（等于、小于、大于）进行过滤的功能。如下图。

四还有表单的编辑（在编辑完成后，列表会自动刷新）、导出等功能。编辑效果如下图。

五异步动态加载的二级联动combobox。实现市和区县的联动功能。

下面我来具体介绍下，这四部分是如何实现的。

首先，需要引入需要的js及css文件。其中icon.css是图标样式，datagrid-filter.js是过滤行所需的插件，easyui-lang-zh_CN.js则是语言配置文件(如果不引入，页码等信息会显示英文，日期格式也会有问题)

下面是body的全部代码

<body>

<table id="dg" title="工程列表" style="width:100%;height:800px">
<thead>
<tr>
<th field="ck" checkbox="true"></th>
<th data-options="field:'PROJECT_ID',width:50,sortable:true,align:'center',hidden: true" >序号</th>
<th data-options="field:'PROJECT_KEYCODE',width:180,sortable:true,align:'center'">项目编号</th>
<th data-options="field:'PROJECT_AREA',width:100,align:'center'">项目所在地市</th>
<th data-options="field:'PROJECT_AREA_DISTRICT',width:100,align:'center'">所在地区县</th>
<th data-options="field:'PROJECT_NAME',width:300,align:'center'">项目名称</th>
<th data-options="field:'PROJECT_USE',width:150,align:'center'">项目类别</th>
<th data-options="field:'PROJECT_TYPE',width:200,align:'center'">使用性质</th>
<th data-options="field:'CHECKTIME',width:200,sortable:true,align:'center',formatter:formatDate">审核时间</th>
<th data-options="field:'DES_DEPT',width:200,align:'center'">设计单位</th>
<th data-options="field:'SURVEY_DEPT',width:200,align:'center'">勘察单位</th>
</tr>
</thead>
</table>

<div id="dlg" class="easyui-dialog" closed="true"></div>
<script type="text/javascript">
$(function () {
{
var toolbar = [
{
text: '基本信息编辑',
iconCls: 'icon-edit',
handler: function () {
var row = $('#dg').datagrid('getSelected');

$('#dlg').dialog({
title: '基本信息编辑',
width: 650,
height: 450,
top: 20,
closed: false,
cache: false,
href: 'arc_project_info.aspx?mode=upd&pk=' + row.PROJECT_ID
});
$('#dlg').window('center');
}
}
, '-', {
text: '基本信息查询',
iconCls: 'icon-search',
handler: function () {
var row = $('#dg').datagrid('getSelected');
var detailLog = $("<div/>").dialog(
{
title: '工程基本信息',
width: '800px',
height: '550px',
top: 20,
modal: false,
closable: true,
href: "detail.aspx?id=" + row.PROJECT_ID + "&temp=" + Math.random()
});
}
}, '-', {
text: '材料信息查询',
iconCls: 'icon-search',
handler: function () {
var row = $('#dg').datagrid('getSelected');
window.location = 'clxx.aspx?project_id=' + row.PROJECT_ID;
}
}, '-', {
text: '导出EXCEL',
iconCls: 'icon-save',
handler: function () {

field: 'PROJECT_USE',
type: "combobox",
height: "35px",
options: {
panelHeight: '500',
editable: false,
data: [{ value: '', text: '全部' }, { value: '市政工程', text: '市政工程' }, { value: '房屋建筑工程', text: '房屋建筑工程' }],
onChange: function (value) {
if (value == '') {
dg.datagrid('removeFilterRule', 'PROJECT_USE');
} else {
dg.datagrid('addFilterRule', {
field: 'PROJECT_USE',
op: 'equal',
value: value
});
}
dg.datagrid('doFilter');
}
}
//op: ['equal', 'less', 'greater']//, 'notequal'
},
{

field: 'PROJECT_TYPE',
type: "combobox",
height: "35px",
options: {
panelHeight: '500',
editable: false,
url: 'arc_base_handler.ashx?all=1&key=03',
method: 'get',
valueField: 'base_name',//base_code
textField: 'base_name',
onChange: function (value) {
if (value == '') {
dg.datagrid('removeFilterRule', 'PROJECT_TYPE');
} else {
dg.datagrid('addFilterRule', {
field: 'PROJECT_TYPE',
op: 'equal',
value: value
});
}
dg.datagrid('doFilter');
}
}
},
{

field: 'PROJECT_AREA_DISTRICT',
type: "combobox",
height: "35px",
options: {
panelHeight: '500',
editable: false,
url: 'arc_base_handler.ashx?all=1&key=' + $("#_easyui_textbox_input2").val(),
method: 'get',
valueField: 'base_name',//base_code
textField: 'base_name',
onChange: function (value) {
if (value == '') {
dg.datagrid('removeFilterRule', 'PROJECT_AREA_DISTRICT');
} else {
dg.datagrid('addFilterRule', {
field: 'PROJECT_AREA_DISTRICT',
op: 'equal',
value: value
});
}
dg.datagrid('doFilter');
}
}
},
{

field: 'PROJECT_AREA',
type: "combobox",

options: {
multiple: false,
url: 'arc_base_handler.ashx?all=1&key=04&mode=qry',
method: 'get',
editable: false,
valueField: 'base_code',//base_code
textField: 'base_name',
onChange: function (value) {

if (value == '') {
dg.datagrid('removeFilterRule', 'PROJECT_AREA');
} else {

synchDISTRICT(value);
dg.datagrid('addFilterRule', {
field: 'PROJECT_AREA',
op: 'equal',
value: $(this).combobox('getText')
});
}
dg.datagrid('doFilter');
}
},

}
]);
function synchDISTRICT(key)
{
var url = 'arc_base_handler.ashx?all=1&key=' + key + '&mode=qry';// +
$("input[name='PROJECT_AREA_DISTRICT']").combobox({
url: url,
valueField: 'base_name',
textField: 'base_name'
});
}
$("input[name='CHECKTIME']").attr("readOnly", "readOnly");
$("input[name='CHECKTIME']").focus(function () {
WdatePicker({ isShowClear: false, errDealMode: 1, maxDate: '%y-%M-{%d}', dateFmt: 'yyyy-MM-dd' });
});

});
$('#dlg').dialog({
onClose: function () {
$('#dg').datagrid('reload'); //重新加载载数据
}
});
</script>
</body>

后台数据查询的主要代码：

string ls_key = context.Request.Params["key"];
string ls_page = context.Request.Params["page"];
string ls_sort = context.Request.Params["sort"];
string ls_order = context.Request.Params["order"];
string ls_rows = context.Request.Params["rows"];
string ls_filter = context.Request.Params["filterrules"];

if (!string.IsNullOrEmpty(ls_filter))//这里将获取到的过滤条件组合成一个类，再传递给数据库操作层。
{
JArray ja = (JArray)JsonConvert.DeserializeObject(ls_filter);

foreach (JObject o in ja)
{
FILTER lm_filter = new FILTER();
lm_filter.filed = o["field"].ToString();
lm_filter.op = o["op"].ToString();
lm_filter.val = o["value"].ToString();
lm_fils.Add(lm_filter);

}
}

private string ls_getJson(string as_page, string as_rows, IList<FILTER> ls_fil, string ls_sort, string ls_order,string ls_add)
{

int li_count = 0;

li_count = lb_pro.GetCount(ls_fil);//返回记录总数
string ls_rtn = "";
string ls_con = "";

{
if(string.IsNullOrEmpty(ls_sort))
{
ls_sort = "project_id";
}
DataTable dt = lb_pro.GetListByPage(ls_fil, ls_sort+" "+ ls_order, (int.Parse(as_page) - 1) * int.Parse(as_rows) + 1, int.Parse(as_page) * int.Parse(as_rows),ls_add);

foreach (DataRow dr in dt.Rows)
{
ls_con += "{";
for (int s=0;s< dt.Columns.Count; s++)
{
string colname = dt.Columns[s].ColumnName;
ls_con += "\"" + colname + "\":\"" + dr[colname].ToString().Trim() + "\",";
}

ls_con = ls_con.Substring(0, ls_con.Length - 1);
ls_con += "},";

}

}
if (ls_con == "")
return "{\"total\":\"" + li_count + "\",\"rows\":[]}";
return ls_rtn = "{\"total\":\"" + li_count + "\",\"rows\":" + "["+ ls_con.Substring(0, ls_con.Length - 1)+"]}";//project_id,project_name,project_type,project_use,project_area,project_btime,project_acreage,project_price

}

数据库操作层代码如下：

public DataTable GetListByPage(IList<FILTER> am_con, string orderby, int startIndex, int endIndex,string ls_add)
{
StringBuilder strSql = new StringBuilder();
string as_con = " 1=1 ";
foreach (FILTER fi in am_con)
{
if (fi.op != "contains")
{
if (fi.filed.ToLower().IndexOf("time") > 0 || fi.filed.ToLower().IndexOf("date") > 0)
{
CDatabase.Parameters.Add(":filed", OracleDbType.Date).Value = Convert.ToDateTime(fi.val);
}
else
{
CDatabase.Parameters.Add(":filed", OracleDbType.Varchar2).Value = fi.val;
}
}
switch (fi.op)
{
case "less":
as_con += " and " + fi.filed + " < :filed ";
break;
case "greater":
as_con += " and " + fi.filed + " > :filed ";
break;
case "equal":
as_con += " and " + fi.filed + " = :filed ";
break;
case "contains":

if (fi.filed.ToUpper() == "PROJECT_AREA")
{
as_con += " and (PROJECT_AREA_DISTRICT like :PROJECT_AREA_DISTRICT or " + fi.filed + " like: filed )";
CDatabase.Parameters.Add(":PROJECT_AREA_DISTRICT", OracleDbType.Varchar2).Value = "%" + fi.val + "%";
CDatabase.Parameters.Add(":filed", OracleDbType.Varchar2).Value = "%" + fi.val + "%";
}
else
{
as_con += " and " + fi.filed + " like :filed ";
CDatabase.Parameters.Add(":filed", OracleDbType.Varchar2).Value = "%" + fi.val + "%";
}
break;

default:
break;
}

}
if(ls_add!="")
{
as_con += ls_add;
}
if (startIndex==0&&endIndex==0)
strSql.AppendFormat("select * from （ select t.*,rownum rn from( select * from arc_project {0} {1}) t ) ", "where " + as_con, "order by " + orderby);
else
strSql.AppendFormat("select * from （ select t.*,rownum rn from( select * from arc_project {2} {3}) t ) where rn >= {0} and rn <= {1}", startIndex, endIndex, "where " + as_con, "order by " + orderby);

DataTable dt = CDatabase.SetDataTable(Convert.ToString(strSql));
return dt;

}

easyui入门之dataGrid(一)

猜你喜欢