ASP.net 中使用Flexigrid详细教程之三--在Flexigrid中使用自定义搜索条件
2011-11-20 09:08
471 查看
前两篇分别讲了Flexgrid的基本用法和调用数据库使用的方法。很多网友留言问更深入的方法,比如自定义查询,想使用自己的搜索条件来搜索数据。本文将详细地讲一下这个方面。首先应确认你已经完成了教程二中的以下几个步骤:1、建立针对一个表的存储过程2、建立一个ASHX文件来检索并提供数据3、使用一个类来把Dataset转为JSON格式4、前台页面参数配置ASP.net中使用Flexigrid详细教程之一,基本使用ASP.net中使用Flexigrid详细教程之二-直接使用数据库数据(有图有真相)如果上面的已经做好了。我们可以开始了,首先看一下DEMO效果:
要实现这一点,需要在ASHX文件和页面文件中做改动。首先在页面文件中改成以下的代码:
要实现这一点,需要在ASHX文件和页面文件中做改动。首先在页面文件中改成以下的代码:
<scripttype="text/javascript"> $(document).ready(function(){ $("#fgrdProduct").flexigrid ( { url:'JSON/ProList.ashx', dataType:'json', colModel:[ {display:'项目ID',name:'pro_id',sortable:true,width:80,align:'center'}, {display:'项目编码',name:'pro_no',sortable:true,width:80,align:'center'}, {display:'项目名称',name:'pro_name',sortable:true,width:80,align:'left'}, {display:'业务类别',name:'pro_type',sortable:true,width:80,align:'left'}, {display:'投资规模',name:'pro_invest',sortable:true,width:80,align:'left'}, {display:'负责人',name:'usr_cname',sortable:true,width:80,align:'right'}, {display:'启动时间',name:'pro_date',sortable:true,width:80,align:'left'}, {display:'项目进展',name:'pro_process',sortable:true,width:80,align:'left'} ], searchitems:[ {display:'Name',name:'pro_name'} ], buttons:[ {name:'Add',displayname:"新增",bclass:'Add',onpress:toolbarItem_onclick}, {name:'Delete',displayname:"删除",bclass:'Delete',onpress:toolbarItem_onclick} ], sortname:'pro_id', sortorder:'asc', usepager:true, striped:true, title:'项目列表', useRp:true, rp:10, showTableToggleBtn:true, width:805, onSubmit:addFormData, height:250, procmsg:'请等待数据正在加载中…' } ); functiontoolbarItem_onclick(cmd,grid){ if(cmd=="Add"){ alert("cmdaddisexcuted"); } elseif(cmd=="Delete"){ alert("cmdDeleteisexcuted"); } } //Thisfunctionaddsparamaterstothepostofflexigrid.Youcanaddaverificationaswellcan //returnfalseifyoudon'twantflexigridtosubmit functionaddFormData(){ //passingaformobjecttoserializeArraywillgetthevaliddatafromalltheobjects,but,ifyoupassanon-formobject, //youhavetospecifytheinputelementsthatthedatawillcomefrom vardt=$('#sform').serializeArray(); $("#fgrdProduct").flexOptions({params:dt}); returntrue; } $('#sform').submit ( function(){ $('#fgrdProduct').flexOptions({newp:1}).flexReload(); returnfalse; } ); }); </script>
searchitems:[{display:'Name',name:'pro_name'}]这一条是关键。你可以按这个格式多写几个查询条件,而我这里只有一个。
即按pro_name来搜索。前台显示为Name。
然后在后台的ASHX文件中做以下修改:
publicStringGetProList()
{
//intintFlag=int.Parse(HttpContext.Current.Session["usrFlag"].ToString());
//intintFlag=int.Parse(Session["usrFlag"])
intpage=1;
if(HttpContext.Current.Request.Form["page"]!=null)
{
page=int.Parse(HttpContext.Current.Request.Form["page"].ToString());
}
intrp=1;
if(HttpContext.Current.Request.Form["rp"]!=null)
{
rp=int.Parse(HttpContext.Current.Request.Form["rp"].ToString());
}
stringsortname="pro_id";
if(HttpContext.Current.Request.Form["sortname"]!=null)
{
sortname=HttpContext.Current.Request.Form["sortname"].ToString();
}stringwhereCondition="1=1";
if(HttpContext.Current.Request.Form["qtype"]!=null&&HttpContext.Current.Request.Form["query"]!=null&&HttpContext.Current.Request.Form["query"].ToString()!=string.Empty)
{
whereCondition=BuildWhereCondition(HttpContext.Current.Request.Form["qtype"].ToString(),HttpContext.Current.Request.Form["query"].ToString());
}
stringstrWhere="1=1";
if(HttpContext.Current.Request.Form["catID"]!=null)
{
strWhere="cat_id="+HttpContext.Current.Request.Form["catID"].ToString();
}
if(HttpContext.Current.Request.Form["proName"]!=null)
{
strWhere+="andpro_namelike'%"+HttpContext.Current.Request.Form["proName"].ToString()+"%'";
}whereCondition+="and"+strWhere;
stringsortorder="DESC";
if(HttpContext.Current.Request.Form["sortorder"]!=null)
{
sortorder=HttpContext.Current.Request.Form["sortorder"].ToString();
}
stringsortExp=sortname+""+sortorder;
intstart=((page-1)*rp)+1;DataSetds=newDataSet();inttotal=0;
BLL.projectbll=newBLL.project();
ds=bll.GetListByPage(whereCondition,sortExp,start,rp-1,outtotal);returnJsonForJqgrid(ds.Tables[0],page,total);}privatestringBuildWhereCondition(stringcolumnName,stringcolumnValue)
{
stringwhereCondition=string.Empty;
PropertyInfocolumnInfo=typeof(Model.project).GetProperty(columnName);
if(columnInfo!=null)
{
if(columnInfo.PropertyType==typeof(int))
{
whereCondition=columnName+"="+columnValue;
}
elseif(columnInfo.PropertyType==typeof(String))
{
whereCondition=columnName+"LIKE'%"+columnValue+"%'";
}
elseif(columnInfo.PropertyType==typeof(DateTime))
{
whereCondition=columnName+"='"+columnValue+"'";
}
}
returnwhereCondition;
}
即我们在ashx中定义了一个strWhere的变量,用于接受自定义的查询条件。这一点很多网上的文章没有写明,让人走了不少弯路。我试验了很多次,从qtype是取不到的。当然如果你有好的方法,可以告诉我。
今天就讲到这里吧。
相关文章推荐
- ASP.net 中使用Flexigrid详细教程之三--在Flexigrid中使用自定义搜索条件
- ASP.net 中使用Flexigrid详细教程之一,基本使用
- ASP.net 中使用Flexigrid详细教程之二-直接使用数据库数据(有图有真相)
- asp.net mvc Route 使用自定义条件(constraints)禁止某ip登陆
- asp.net mvc Route 使用自定义条件(constraints)禁止某ip登陆
- 全自定义功能sql搜索查询datagridview 牛多条件查询的asp.net实现!
- 如何使用谷歌的自定义搜索引擎来搜寻一个ASP.NET网站
- Scott Mitchell 的ASP.NET 2.0数据教程之十二:在GridView控件中使用TemplateField
- ASP.NET jQuery 食谱25 (使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能)
- Scott Mitchell 的ASP.NET 2.0数据操作教程之七:使用DropDownList过滤的主/从报表
- ASP.NET 5系列教程 (五):在Visual Studio 2015中使用Grunt、Bowe
- asp.NET自定义服务器控件内部细节系列教程六(复杂属性)
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【二】——使用Repository模式构建数据库访问层
- FCKeditor是使用非常广泛的HTML编辑器,本文从 ASP.NET 的使用场景对 FCKeditor 与 FCKeditor.NET 的配置、功能扩展(如自定义文件上传子目录、自定义文件名、上传图片的后期处理等)、以及安全性进行初步的阐述。
- VS2008下使用FCKeditor2.6.3安装配置详细图解(asp.net)
- asp.net mvc 使用 Autocomplete 实现类似百度,谷歌动态搜索条提示框。
- [翻译]Scott Mitchell 的ASP.NET 2.0数据教程之十二:在GridView控件中使用TemplateField
- Asp.net 2.0 自定义控件开发专题[详细探讨页面状态(视图状态和控件状态)机制及其使用场景](示例代码下载)
- [翻译]Scott Mitchell 的ASP.NET 2.0数据教程之十二:在GridView控件中使用TemplateField
- Scott Mitchell 的ASP.NET 2.0数据操作教程之七:使用DropDownList过滤的主/从报表