需求:
下拉框加载内容,其中加载之前要给下拉框添加一条数据"全部"。
第一种方式,使用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的内部代码,这样什么都不是问题了,所以说我们要学的还很多,大家一起加油吧!