jQueryUI Repeater 增加过滤行检索数据 JE10_jquery repeater 追加新行-CSDN博客

有时, 我们需要检索特定的数据, 在 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>