1. 高级查询
在我们做项目的时候经常想要按名称、编号进行查询数据,可在开发时会把最常用的查询条件写上,不常用的就不写了,也是因为把所有字段都写上太多了,布局不好看而且不实用。还有些查询条件几百年用那么一次,也不能用到时调整一下程序。基于这些考虑我们做的一个高级查询组件,可以把所有列都作为查询条件,把最常用的查询条件还正常放在页面上。点击高级查询按钮后,会有所以列作为筛选条件方便进行查找,别如果本次条件比较多还可以保存起来为一个查询方案,下次时可以方便再次查询。
1.1. 效果展示
图 2.1
高级查询页面
图 2.2
高级查询管理页面
图 2.3
1.2. 调用说明
1.2.1. 添加高级查询的公共js引用
<script src="~/Content/js/core/common.advanced_query.js"></script>
1.2.2. 定义查询事件
在定义查询的表格对象后,定义查询事件。下边的self.grid是datagrid的绑定对象。
this.executeQueryClick = function (post){
self.grid.queryParams($.extend(ko.toJS(self.queryForm), post));
}
1.2.3. 给表格绑定高级查询
通过下边的方式可以绑定高级查询,可以自动生成快速查询栏以及高级查询、清空的按钮
//通过拼html的方法,把选中的grid放进一个layout的center中,上方添加一个north,里边渲染快速查询方案以及方案配置的按钮
//_param = {
//gridName:"grid" //datagrid的id值
//grid:self.grid //需要高级查询的datagrid绑定对象
//_url:"/DEMO/DemoSingleTableAdvancedQuery/DemoSingleTableAdvancedQuery" //当前页面路径
//searchFunc:self.executeQueryClick //对应viewModel中的this.executeQueryClick方法
//flagSession:false //true表示从页面读取datagrid的editor属性自动生成查询列,false表示手动填写查询列
//flagCollapsed:true //true加载时查询栏展开,false表示合死,默认true
//GridViewName:"grid" //使用数据库中GridViewName存入值为GridViewName的数据进行高级查询,方便对现有数据进行处理,以及与cs程序互通。默认等于gridName,如为此值赋值,注意要同时修改controller中的查询列绑定值
//}
snf.advancedQueryLayout({
gridName:"grid",
grid :self.grid,
_url: "/DEMO/DemoSingleTableAdvancedQuery/DemoSingleTableAdvancedQuery",
searchFunc :self.executeQueryClick,
flagSession :false,
flagCollapsed: true
//GridViewName:"grid"
});
此方法应当在定义self.grid之后调用!
1.2.4. 如果不需要快速查询栏
通过此种方式可单独添加一个高级查询按钮,首先定义一个按钮,标签添加属性data-bind="click:advancedQueryClick"
this.advancedQueryClick=function(){
//只需要高级查询按钮,不需要快速查询栏时,调用此方法,参数如下,每个参数含义可参考2.2.3
snf.AdvancedQueryButtonClick({
gridName:"grid",
grid :self.grid,
_url: "/DEMO/DemoSingleTableAdvancedQuery/DemoSingleTableAdvancedQuery",
searchFunc :self.executeQueryClick,
flagSession :true,
//GridViewName:"grid"
});
}
1.2.5. 添加高级查询条件
flagSession=true时,会直接从editor中读取高级查询条件,如果flagSession=false,则要手动在controller中添加查询条件,代码如下
#region 获取高级查询的控件类型
[MvcMenuFilter(false)]
public dynamic GetAdvancedQueryColumns(RequestWrapper request)
{
var list = new List<KeyValuePair<string, object>>();
list.Add(new KeyValuePair<string, object>("grid", new object[]{
new string[]{ "DemoSingleTable.Code", "编号", "validatebox" },
new object[]{ "DropDownSingle", "数据字典", "combobox", this.GetItemsListCategoryBs("ItemsGender", "ItemCode", "ItemName")},
//new object[]{ "a", "a", "combotree", SNFService.Instance.BaseItemDetailsService.GetDataTable(this.UserInfo, "ItemsTreeTest")},
new string[]{ "Num", "数量", "numberbox", "min:0,precision:2" },
new string[]{ "Money", "金额", "numberspinner", "min:0,precision:2" },
new string[]{ "IsCheckbox", "复选框", "checkbox" },
new string[]{ "DateBox", "日期", "daterange" },
new string[]{ "ApproveState", "状态", "lookup", "lookupType:‘ItemsAuditStatus‘" }
}));
return list.Find(s => s.Key == request["GridViewName"]).Value;
}
#endregion
此方法应写在BaseApiController的继承类下
其中参数
list是一个列表,里边可以包含多个键值对,每个键都对应着一个表格控件。
每个键值对代表一个表格的高级查询绑定,键值对的key是绑定高级查询的表格的id值,键值对的value是一个object对象,包含对应表格的全部的高级查询所需的查询条件。此方法会自动根据表格id进行匹配,返回当前表格高级查询所需的查询条件列表。每个返回的查询条件对象中,可根据实际情况包含三到四个元素,主要控件类型不同有所区分。
注意:js当中advancedQueryClick方法的参数gridName与上面方法list的key值"grid"还有request["GridViewName"]要保持一致。
第一个元素:列名。对应数据库中的字段,多表查询时可输入表名.列名,如DemoSingleTable.Code
第二个元素:查询条件中文名,如:编号
第三个元素:控件类型,现在支持validatebox(文本框),combobox(下拉),
numberbox(数字框),numberspinner(数字微调框),checkbox(复选框),daterange(日期范围),lookup(弹框控件),combotree(下拉树)
第四个元素:扩展属性,对combobox、combotree来说,第四个值传下拉需要展示的数据源;对numberbox,numberspinner,lookup来说,第四个元素之间写easyui控件的data-options里边需要填写的内容即可(可以参考easyui1.3.2的api);validatebox,daterange,checkbox不需要第四个元素
1.2.6. 在controller里的查询方法增加拼接查询条件的方法
SNFService.Instance.CreateService<BaseUserQuerysService, IBaseUserQuerysService>().GetParamQueryById(UserInfo, request, ref pQuery);
如图
图 2.4
1.2.7. demo样例
程序路径:
/DEMO/ DemoSingleTableAdvancedQuery /DemoSingleTableAdvancedQuery
可在程序中按照此路径增加菜单查看
1.1. 注意事项
一、如果多表查询的高级查询,需要将flagSession定义为false,并且在controller中定义的对象中,把每一列定义为 表名.列名
如图,画框部分为应当使用的写法
图 2.5
二、一个页面多个表格用到高级查询时,如果有多个表格需要在同一controller中进行高级查询的调用,请将各个表格的id值取成不同的,无论是否出现在同一cshtml页面中。调用时,每一表格需在图2.5的GetAdvancedQueryColumns方法中单独添加一段查询条件的代码。如,我们还有一个id为gridlist的表格也要进行高级查询,那么就在return的前一行加上如下代码:
list.Add(new KeyValuePair<string, object>("gridlist", new object[]{
new string[]{ "DemoSingleTable.Code", "编号", "validatebox" },
new object[]{ "DropDownSingle", "数据字典", "combobox", this.GetItemsListCategoryBs("ItemsGender", "ItemCode", "ItemName")},
//new object[]{ "a", "a", "combotree", SNFService.Instance.BaseItemDetailsService.GetDataTable(this.UserInfo, "ItemsTreeTest")},
new string[]{ "Num", "数量", "numberbox", "min:0,precision:2" },
new string[]{ "Money", "金额", "numberspinner", "min:0,precision:2" },
new string[]{ "IsCheckbox", "复选框", "checkbox" },
new string[]{ "DateBox", "日期", "daterange" },
new string[]{ "ApproveState", "状态", "lookup", "lookupType:‘ItemsAuditStatus‘" }
}));