jQueryUI Repeater 增加过滤行检索数据 JE10
有时, 我们需要检索特定的数据, 在 JQueryElement 3.2.1 版本中, Repeater 可以通过 FilterField 和 FilterTemplate 来实现这个功能.
本次的例子仍然是在前几个示例的基础上修改, 如果大家有不明白的可以参考 Repeater 显示批处理行进度, Repeater 无刷新获取分页数据, Repeater 无刷新删除 新建 更新数据, Repeater 以不同色彩显示各种状态的行.
如果需要根据不同的条件来检索数据, 我们首先需要修改一下 Fill 方法:
1 [WebMethod ( )]
2 publicstaticobject 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 stringwhere=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 returnnew { __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, 可以在上面的地址看到新版本改动的内容.
请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码
实际过程演示: http://www.tudou.com/programs/view/qDOhS_ZmmAE/, 建议全屏观看.
最后, 说一些题外话.
在视频中, 我说这可能是最后的一个关于 Repeater 的例子, 但其实发表此篇文章以前, 我又修改了 Repeater 的代码, 修改了样式之类的内容. 看来下一篇可能还是 Repeater 的文章. 由于这些文章都是使用的同一个例子, 所以重复的代码, 我也没法重复的来讲述它了.
对于 Repeater 我想他应该是由程序员来控制布局样式之类的内容的, 再完善 Repeater 之后, 我想完善它在托管服务器上的帮助文档, 然后开发下一个插件 Grid. 虽然, 已经有了比较出色 jQuery 的 DataGrid.
下一期中, 我会修改 Repeater 的样式部分的代码, 通过 je-class="<绑定样式>" 这样的语法, 我们可以实现更多的样式, 同时还准备增加排序的功能.
