市委组织部考核项目--"加载全部项"

需求： 

 

   下拉框加载内容，其中加载之前要给下拉框添加一条数据"全部"。

第一种方式，使用asp.net控件，easyui的样式,需要点击查询按钮才出结果。

第二种方式，使用easyui的控件，问题是：添加"全部"这一项无id，经过测试对于easyui控件来说必须绑定id字段，否则出错(每次选择都为第一项)。

第三种方式，使用easyui的控件，将绑定的id和text设置成同一字段即可！无需点击查询按钮！

页面：

 

下面分别介绍一下第一种方式和第三种方式：

第一种方式：

html代码：

  <span>年　份: </span>
        <asp:DropDownList ID="YearName"  runat="server" editable="false" panelHeight="auto" class="easyui-combobox" required="true" Width="131px"></asp:DropDownList>    
        <span>类　型: </span>
        <asp:DropDownList ID="UnitsName"  runat="server" editable="false" panelHeight="250px" class="easyui-combobox" required="true" Width="131px"></asp:DropDownList>          
       
        <label class="first txt-green">文件名: </label>
        <asp:TextBox ID="txtWordName" runat="server"></asp:TextBox>  
        <%-- 何静媛 2014年2月18日 ,模糊查询 文本框输入进行限制,防止SQL注入 ErrorMessage="请输入模糊查询条件"--%>
            <%--<asp:LinkButton ID="btnSearch" class="btn-lit btn-middle" runat="server" οnclick="queryYear()"  ValidationGroup="fuzzyQueryExam"  ><span>查询</span></asp:LinkButton>--%>                  
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"  ControlToValidate="txtWordName" ValidationGroup="fuzzyQueryExam" Display="Dynamic" ></asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtWordName" ValidationGroup="fuzzyQueryExam"
                ErrorMessage="请输入汉字,数字,字母或下划线_!" 
                ValidationExpression="^[a-zA-Z0-9_\u4e00-\u9fa5]+$" Display="Dynamic"></asp:RegularExpressionValidator>
       <%-- 结束 何静媛 2014年2月18日 --%>
        <a href="#" class="easyui-linkbutton" οnclick="queryYear();" data-options="">查询</a><br />
      <br />

JS代码：向一般处理程序传递参数

<script type="text/javascript">   
                //  根据类型选择条件进行查询
        function queryYear() {
            //查询参数直接添加在queryParams中
            var queryParams = $('#dg').datagrid('options').queryParams;
            getQueryParams(queryParams);
            $('#dg').datagrid('options').queryParams = queryParams;  //传递参数值
            $('#dg').datagrid('reload');  //重新加载表信息datagrid

        }
        //查询并把数据传递给后台，数组
        function getQueryParams(queryParams) {
            var Category = $("#YearName").datebox("getText");
            var UnitName = $("#UnitsName").datebox("getText");
            var txtWordName = document.getElementById("txtWordName").value;
            queryParams.YearName = Category;
            queryParams.UnitName = UnitName;
            queryParams.txtWordName = txtWordName;
            return queryParams;
        }
 </script>

一般处理程序：

 /// <summary>
        /// 简单查询--根据前台传来的参数
        /// </summary>
        /// <param name="context"></param>
        public void Query(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //===============================================================
            //获取查询条件:【用户id,开始时间，结束时间，关键字】
            string category, startTime, endTime, key, WordName;
            category = startTime = endTime = key =WordName= "";
            //获取前台传来的值
            if (null != context.Request.QueryString["YearName"])
            {//获取前台传来的值
                if (context.Request.QueryString["YearName"].ToString().Trim() == "全部")
                {
                    category = "";
                }
                else
                {
                    category = context.Request.QueryString["YearName"].ToString().Trim();
                }               
               
            }
            if (null != context.Request.QueryString["txtWordName"])
            {//获取前台传来的值
               
                    WordName = context.Request.QueryString["txtWordName"].ToString().Trim();
            }
            if (null != context.Request.QueryString["StartTime"])
            {
                startTime = context.Request.QueryString["StartTime"].ToString().Trim();
            }
            if (null != context.Request.QueryString["EndTime"])
            {
                endTime = context.Request.QueryString["EndTime"].ToString().Trim();
            }
            if (null != context.Request.QueryString["UnitName"])
            {
                //key = context.Request.QueryString["KeyWord"].ToString().Trim();
                if (context.Request.QueryString["UnitName"].ToString().Trim() == "全部")
                {
                    key = "";
                }
                else
                {
                    key = context.Request.QueryString["UnitName"].ToString().Trim();
                }               
               
            }

            //================================================================
            //获取分页和排序信息：页大小，页码，排序方式，排序字段
            int pageRows, page;
            pageRows = 10;
            page = 1;
            string order, sort, oderby; order = sort = oderby = "";
            if (null != context.Request.QueryString["rows"])
            {//获取前台传过来的
                pageRows = int.Parse(context.Request.QueryString["rows"].ToString().Trim());

            }
            if (null != context.Request.QueryString["page"])
            {

                page = int.Parse(context.Request.QueryString["page"].ToString().Trim());

            }
            if (null != context.Request.QueryString["sort"])
            {

                order = context.Request.QueryString["sort"].ToString().Trim();

            }
            if (null != context.Request.QueryString["order"])
            {

                sort = context.Request.QueryString["order"].ToString().Trim();

            }


            //===================================================================
            //组合查询语句：条件+排序
            StringBuilder strWhere = new StringBuilder();
            if (WordName != "")
            {
                //ScoreStyleName like '%{0}%' and ", key
                strWhere.AppendFormat(" WordName like '%{0}%' and ", WordName);
            }
            if (key != "")
            {
                strWhere.AppendFormat(" unitName = '{0}' and ", key);
            }
            if (category != "")
            {
                strWhere.AppendFormat(" strYear= '{0}' and ", category);
            }
            if (startTime != "")
            {
                strWhere.AppendFormat(" PublishDate >= '{0}' and ", startTime);
            }
            if (endTime != "")
            {
                strWhere.AppendFormat(" PublishDate <= '{0}' and ", endTime);
            }

            //删除多余的and
            int startindex = strWhere.ToString().LastIndexOf("and");//获取最后一个and的位置
            if (startindex >= 0)
            {
                strWhere.Remove(startindex, 3);//删除多余的and关键字
            }
            if (sort != "" && order != "")
            {
                //strWhere.AppendFormat(" order by {0} {1}", sort, order);//添加排序
                oderby = order + " " + sort;
            }
            //DataSet ds = Bnotice.GetList(strWhere.ToString());  //调用不分页的getlist

            //调用分页的GetList方法
            DataSet ds = wordBll.GetListByPage(strWhere.ToString(), oderby, (page - 1) * pageRows + 1, page * pageRows);
            int count = wordBll.GetRecordCount(strWhere.ToString());//获取条数
            string strJson = ToJson.Dataset2Json(ds, count);//DataSet数据转化为Json数据
            context.Response.Write(strJson);//返回给前台页面
            context.Response.End();

        }

第三种方式：

html代码：此下拉框绑定的valueField和textField绑定同一字段

 <span>考核年份: </span>
        <%--<asp:DropDownList ID="YearName"  runat="server" editable="false" panelHeight="auto" class="easyui-combobox" required="true" Width="131px"></asp:DropDownList>    --%>
        <input id="YearName" class="easyui-combobox"  style="width:180px" editable="false"  data-options=" 
                    panelHeight: 'auto',  
                    valueField: 'stryear',  
                    textField: 'stryear',
                    select:true,            
                    url: 'UnitsQueryWord.ashx?test=GetYear',   
                onSelect: function(rec){                
                    $('#dg').datagrid('reload',{YearName: $('#YearName').combobox('getText')});   
                }
                    " /> 

一般处理程序：将下拉框改变的事件传的值接收到

 if (null != context.Request.QueryString["YearName"])
            {//获取前台传来的值
                if (context.Request.QueryString["YearName"].ToString().Trim() == "全部")
                {
                    category = "";
                }
                else
                {
                    category = context.Request.QueryString["YearName"].ToString().Trim();
                }               
               
            }

总结：

    通过做市委组织部考核项目使用EasyUI，对它有了一定的了解，EasyUI给我们带来了极大的方便，让我们的工作变的简单快捷，而且无需我们自己美化界面！但是在使用它的过程中也发现了一些它的不足和局限。下拉框必须绑定id，否则有错误，而且对于刚接触的人来说不经意动了哪可能效果就没了，还不知道问题出在哪里，比较让人苦恼！在这里只是简单的总结一下，以后应用时再注意！

    其实出现这些问题只能说明我们还没有真正的了解它，而且我们要知道想实现上述功能有多种方式，再不行还可以直接修改EasyUI的内部代码，这样什么都不是问题了，所以说我们要学的还很多，大家一起加油吧！