jQuery EasyUI-DataGrid有参数查询

Datagird显示数据的两种方法，分别是直接前台固定的数据和将数据库中显示到前台，这次我们将第二种方法进行扩展，即有参数的查询。

 

 

实现

        我们要查询数据库中县市区录入信息并将数据显示到前台，不过条件是按照指标来查询，因为不同的指标有不同的县市区数据信息。背景交代完毕，直接上代码。

 

前台代码表格属性字段设置上一篇文章相同

 

 

  <%-- 页面加载时运行js方法 --%>
 <bodyonloadbodyonload="reloadgrid()">

     <%-- 表格的加载 --%>

          <%-- 要传的参数变量--%>
     <div id="NodeChild"style="padding: 2px; font-size: 13px">市直单位定量指标1div>

     <div style="margin: 10px0;">div>
     <div id="tt"class="easyui-tabs" style="width: 1100px; height: 530px;margin-top: 15px">
         <div title="已录入单位"style="padding: 10px" >
             <table id="HaveInput"title="原始数据录入情况" class="easyui-datagrid" style="width:1050px; height: 480px; padding-left: 200px;"data-options="rownumbers:true,url:'ScoresDetailsCity.ashx/ProcessRequest',pageSize:5,pageList:[5,10,15,20],method:'get',toolbar:'#tb',"
                 toolbar="#bar"pagination="true" rownumbers="true"fitcolumns="true" striped="true"singleselect="true">

                 <thead>
                     <tr>
                         <thdata-optionsthdata-options="field:'DepartmentName',width:100">单位名称th>
                         <thdata-optionsthdata-options="field:'Data', width:75">原始数据th>
                         <thdata-optionsthdata-options="field:'Remarks', width:175,align:'right'">备注th>
                         <%--                        <thdata-optionsthdata-options="field:'CountScores', width:75,align:'right'">得分th>--%>
                         <thdata-optionsthdata-options="field:'YearTime', width:85,align:'right'">年份th>
                     tr>
                 thead>
             table>
             <div id="bar">
                 <ahrefahref="javascript:void(0)" class="easyui-linkbutton"iconcls="icon-edit" plain="true"onclick="editUser()">修改数据a>
             div>

         div>
 body>

 

下面是js语句，通过这个函数往一般处理程序传递参数。

 

 //增加查询参数，在页面加载时运行
         function reloadgrid() {
             var test =document.getElementById("NodeChild").innerHTML;
             //查询参数直接添加在queryParams中
             $('#HaveInput').datagrid({
                 url:"ScoresDetailsCity.ashx?test=" + test
             })

             var queryParams =$('#HaveInput').datagrid('options').queryParams;
             getQueryParams(queryParams);
            $('#HaveInput').datagrid('options').queryParams = queryParams;

            $("#HaveInput").datagrid('reload');

         }

 

 

到这里我们就已经将前台代码书写完毕了，下面就该是一般处级程序的的书写了。一般处理程序的书写与上一篇文章有点区别，因为这里还有接收前台传过来的参数的功能。

 

 

 public void ProcessRequest(HttpContextcontext)
        {
            string command =context.Request.QueryString["test"];//前台传的标示值
            if (command == "add")
            {//调用添加方法
                Add(context);
            }
            else if (command =="modify")
            {//调用修改方法
                Modify(context);
            }
            else
            {//调用查询方法
                Query(context);
            }
        }


        public void Query(HttpContext context)
        {
            context.Response.ContentType ="text/plain";
           //===============================================================
            //获取查询条件:
            string category  , key;
            category  = key = "";
            //获取前台传来的值
            if (null !=context.Request.QueryString["Category"])
            {//获取前台传来的值
                category =context.Request.QueryString["Category"].ToString().Trim();
            }
            if (null !=context.Request.QueryString["test"])
            {
                key =context.Request.QueryString["test"].ToString().Trim();
            }



          //组合查询语句：条件+排序
            StringBuilder strWhere = newStringBuilder();
            if (key != "")
            {
                strWhere.AppendFormat("ScoreStyleName like '%{0}%' and ", key);
            }
            if (category != "")
            {
                strWhere.AppendFormat("AdminID= '{0}' and ", category);
            }

         //调用B层方法将参数传下去来获取数据库信息
            DataSet ds =cityQuantifyScoresBLL.GetCityInfo(key);
            DataTable dt = ds.Tables[0];
            int count = dt.Rows.Count;
            string strJson =ToJson.Dataset2Json(ds, count);//DataSet数据转化为Json数据
           context.Response.Write(strJson);//返回给前台页面
            context.Response.End();

        }

 

关于Dataset转化为json的代码我们就不再写了，大家可以参考上一篇文章。

 

我们最后看下效果

 

 

总结

        

    关于datagrid有参数的查询用的还是比较多的，学习是个循序渐进的过程，我们先从最简单的不需要的参数的学起到这次的有参数的查询并显示，我们会在下一篇文章中继续介绍datagrid的知识，是关于一个datagrid可以动态加载表头的知识。