有时, 我们需要检索特定的数据, 在 JQueryElement 3.2.1 版本中, Repeater 可以通过 FilterField 和 FilterTemplate 来实现这个功能.
本次的例子仍然是在前几个示例的基础上修改, 如果大家有不明白的可以参考 Repeater 显示批处理行进度, Repeater 无刷新获取分页数据, Repeater 无刷新删除 新建 更新数据, Repeater 以不同色彩显示各种状态的行.
如果需要根据不同的条件来检索数据, 我们首先需要修改一下 Fill 方法:
1 [WebMethod ( )] 2 public static object Fill ( string realname, string age, string skill, int pageindex, int pagesize ) 3 { 4 int beginIndex = ( pageindex - 1 ) * pagesize + 1; 5 int endIndex = pageindex * pagesize; 6 7 string where = string.Empty; 8 9 if (!string.IsNullOrEmpty(realname)) 10 where += string.Format(" and RealName = '{0}'", realname); 11 12 if (!string.IsNullOrEmpty(age)) 13 where += string.Format(" and Age = '{0}'", age); 14 15 if (!string.IsNullOrEmpty(skill)) 16 where += string.Format(" and Skill = '{0}'", skill); 17 18 string command = string.Format ( "select ID, RealName, Age, Skill from (select ID, RealName, Age, Skill, (select count(*) from Student where ID <= X.ID{2}) as RN from Student as X where (1 = 1){2} order by ID asc) as Y where RN >= {0} and RN <= {1}", beginIndex, endIndex, where ); 19 20 OleDbDataAdapter adapter = new OleDbDataAdapter(command, @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\student.mdb;Persist Security Info=True"); 21 22 StudentDS.StudentDataTable table = new StudentDS.StudentDataTable ( ); 23 adapter.Fill ( table ); 24 25 command = "select count(*) as C from Student where (1 = 1)" + where; 26 adapter = new OleDbDataAdapter(command, @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\student.mdb;Persist Security Info=True"); 27 DataTable countTable = new DataTable ( ); 28 adapter.Fill ( countTable ); 29 30 int count = Convert.ToInt32 ( countTable.Rows[0][0] ); 31 32 List<object> students = new List<object> ( ); 33 34 foreach ( StudentDS.StudentRow row in table ) 35 students.Add ( new { id = row.ID, realname = row.RealName, age = row.Age, skill = row.Skill } ); 36 37 return new { __success = true, rows = students.ToArray ( ), itemcount = count, pageindex = pageindex, pagecount = ( int ) Math.Ceiling ( ( decimal ) count / ( decimal ) pagesize ) }; 38 }
我们为 Fill 方法增加了 realname, age, skill 三个参数作为查询条件, 通过变量 where 组合成了查询的 sql 语句. 当然这样的写法并不是很好, 如果大家有 sql server 建议用存储过程.
方法中的代码我就不再解释了, 来看一段前台比较重要的代码.
1 <FilterTemplate> 2 <tr class="header"> 3 <td> 4 条件: 5 </td> 6 <td> 7 <input type="text" je-id="realname" je-value="realname" class="textbox" /> 8 </td> 9 <td> 10 <input type="text" je-id="age" je-value="age" class="textbox" /> 11 </td> 12 <td> 13 <input type="text" je-id="skill" je-value="skill" class="textbox" /> 14 </td> 15 <td> 16 <a href="#" je-onclick="fill">搜索</a> 17 </td> 18 </tr> 19 </FilterTemplate>
我们在 FilterTemplate 中编写了检索的一行, 其中的 je-value="<条件名称>" 表示文本框的值取自某个条件的值, 这主要用在重新绑定 repeater 时.
此外, 还需要设置 FilterField 属性为 ['realname', 'age', 'skill'], FilterField 中的条件将会传递给 Fill 方法.
好了, 通过上面简单的设置, 我们完成了搜索的功能.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
目前 JQueryElement 最新版本为 3.2.1, 可以在上面的地址看到新版本改动的内容.
示例代码下载: http://zsharedcode.googlecode.com/files/JQueryElementTest.rar.
实际过程演示: http://www.tudou.com/programs/view/qDOhS_ZmmAE/, 建议全屏观看.
最后, 说一些题外话.
在视频中, 我说这可能是最后的一个关于 Repeater 的例子, 但其实发表此篇文章以前, 我又修改了 Repeater 的代码, 修改了样式之类的内容. 看来下一篇可能还是 Repeater 的文章. 由于这些文章都是使用的同一个例子, 所以重复的代码, 我也没法重复的来讲述它了.
对于 Repeater 我想他应该是由程序员来控制布局样式之类的内容的, 再完善 Repeater 之后, 我想完善它在托管服务器上的帮助文档, 然后开发下一个插件 Grid. 虽然, 已经有了比较出色 jQuery 的 DataGrid.
下一期中, 我会修改 Repeater 的样式部分的代码, 通过 je-class="<绑定样式>" 这样的语法, 我们可以实现更多的样式, 同时还准备增加排序的功能.
欢迎访问 panzer 开源项目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 执行各种 js 和 jQuery 脚本以及录制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement.