您的位置:首页 > 编程语言 > ASP

Asp.Net使用Easy UI DataGrid 实现行过滤[行模糊查询数据]

2016-05-25 15:47 1091 查看
在使用Easy UI datagrid 列表控件时,对列表数据的查询需要自己写查询页面,然后点击按钮查询取到数据刷新datagrid,如何说直接在datagrid列表上面对列表上面的某一列进行数据查询或者多列进行查询呢,那样岂不是更加方便,在easy ui官网查询有一个DataGrid Filter Row插件,也是针对于列表数据进行查询 ,但是只是正对于当前页面数据进行查询,不能将参数直接传入数据库进行查询

在百度各种收索,千篇一律,都是指向easy ui 的DataGrid Filter Row插件

在查看easy api时发现datagrid有一个onAfterRender函数,是在视图呈现之后触发,可以使用使用$.fn.datagrid.defaults.view重写默认值对象。

在生成好的datagrid列表的每个标题下面加入一个文本框即可实现想要的效果[生成一个文本框行]

废话不多说,做了一个小Demo

在此之前必须得先有一个datagrid的列表页面,可以自定义



这里的列表是普通的datagrid列表控件,

我需要的效果是:



在此之前说过可以用$.fn.datagrid.defaults.view重写datagrid。

那么就用onAfterRender函数在视图呈现完成以后给datagrid标题行下面追加一行,生成文本框

js code:

$.extend($.fn.datagrid.defaults.view, {
onAfterRender: function (target) {
var dc = $.data(target, 'datagrid').dc;
if (dc.header2.find('[filter="true"]').length == 0) {
var header = dc.header1;
var header2 = dc.header2;
var filterRow = $('<tr></tr>'); //生成一行
var opts = $.data(target, 'datagrid').options;
var columns = opts.columns; //获取列数据集
header.find('tbody').append(filterRow);//将生成的行追到标题tbody里面去
filterRow = $('<tr style="background:#f2f2f2;" filter="true"></tr>');
//遍历列集合
$.each(columns[0], function () {
//判断当前列是不是勾选列和操作列,这里的field[字段ID"_Operate",在使用时必须和页面上面操作列id一致]
if (this.checkbox == undefined && this.field != "_Operate") {
var w = header2.find('[field="' + this.field + '"] > div').width();
if (this.hfilter) {
var a = $('<input field="' + this.field + '" class="easyui-combobox" style="width:' + w + 'px" />');
filterRow.append($('<td></td>').append(a));
a.data('options', this.hfilter);
} else {
//GetFieldValue()方法是获取当前列是否已经经过模糊查询,将查询的值给textbox
var vagvalue = GetFieldValue(this.field);
filterRow.append('<td align="center"><input type="text" class="Vague_border" value="' + vagvalue + '"  onkeyup="doFilter(this)" id="Vague_' + this.field + '"  name="' + this.field + '" style="width:' + w + 'px" /></td>');
}
}
else {
if (this.checkbox) {
filterRow.append('<td><div class="datagrid-cell-check"><input type="checkbox" /></div></td>');
}
else {
filterRow.append('<td></td>');
}

}
});
header2.find('tbody').append(filterRow);
var dgData = $(target).datagrid('getData').rows;
header2.find('input[field]').each(function () {
var opts = $(this).data('options');
var field = $(this).attr('field');
$.extend(opts.options, {
onSelect: function (item) {
var d = _.filter(dgData, function (row) {
return row[field].indexOf(item[opts.options.textField]) > -1;
});
$(target).datagrid('loadData', d);
}
});
$(this)[opts.type](opts.options);
})
var id = $("#VagueField").val();
moveEnd(id);
}
}
});


在使用模糊查询列表时,需要在输入时及时返回数据[根据个人需求可以修改],在此需要在页面上面添加隐藏域,用于存储当前模糊查询的字段和值,在加载datagrid,视图会重新渲染,这里就需要将值存储在隐藏域

js、css 引用:

<link href="../jquery-easyui-1.4.4/themes/default/easyui.css" rel="stylesheet" />
<link href="../jquery-easyui-1.4.4/themes/icon.css" rel="stylesheet" />
<script src="../jquery-easyui-1.4.4/jquery-1.7.2.min.js"></script>
<script src="../jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
<script src="../jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>


html code:

<table id="tb" style="width: 950px" sortname="AcqTime" sortorder="asc" class="easyui-datagrid"
data-options="singleSelect:false,pagination:true,striped:true,iconCls:'icon-edit',pageList:[20],nowrap:false">
<thead >
<tr>
<th data-options="field:'EquipmentGuid',checkbox:true,align:'center' "></th>
<th data-options="field:'DeviceName',sortable:true,align:'center', width:150" >设备名称</th>
<th data-options="field:'Brand',sortable:true,align:'center', width:150" >品牌</th>
<th data-options="field:'Price',align:'center',sortable:true ,width:150" >单价</th>
<th data-options="field:'State',align:'center',sortable:true,width:150 " >状态</th>
<th data-options="field:'Specifications',align:'center',sortable:true,width:150">规格</th>
<th data-options="field:'_Operate',align:'center',formatter:ListShow,width:150" >操作</th>
</tr>
</thead>
</table>
<%--隐藏域--%>
<div>
<input type="hidden" id="VagueValue" />
<input type="hidden" id="VagueField" />
</div>
<%--生成模糊行及迷糊查询功能--%>
<script src="../JS/FilterTable.js"></script>
<script>
$(function () {
VagueSearch();
});
//查询[注:此处方法是公用的加载方法,如需改名,FilterTable.js中也需修改,GetVague()方法是获取当前过滤文本框内的查询条件]
function VagueSearch() {
var querystring = QueryInfo()+ GetVague();
InitList(querystring);
}
//查询
function InitList(querystring) {
$("#tb").datagrid({
url: "../Hand/SelectQueryList.ashx",
queryParams: { Action: "DeviceList", QueryString: querystring },
onLoadError: function (e) {
window.parent.parent.location.href = '/Login.aspx';
},
pageNumber: 1
});
}
//页面查询条件
function QueryInfo()
{
var querystring = "1=1";
return querystring;

}
//操作列
function ListShow(value, row, index) {
return "<a href=\"\">修改</a>";
}
</script>


实现功能后的效果,可以单列模糊查询,也可以多列模糊查询





代码测试通过,有需要的小伙伴可以下载Demo,本人只写了一个基本的,欢迎大神点评
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  asp.net filter datagrid