如何实现 Gridx 在 Server 端的数据筛选（2）

look_w

如何实现 Sever 端的数据筛选 (前台)要实现 Server 端的数据筛选，首先需要在 Client 端的数据筛选基础上再进行一下配置，打开 Server 模式，可以让 Client 端的 Filter 条件发送到 Server 端。然后在 Server 端根据这些条件进行解析，将数据过滤，最后将过滤之后的数据发送到 Client 端。
清单 2. 配置 Server 模式

1 2 3 4 5 6 7 8 9 10 11 12 13

var grid = new Grid({     ......     filterServerMode: true,     filterSetupQuery: function(expr){         // return the filter query that your server can understand.     },     modules: [         ......         Filter,         FilterBar,         ......     ] });

通过在 Grid 的定义中加入 FilterServerMode：true 来打开 Server 模式，就能将 Filter 条件发送到 Server 端，不过此时的 Filter 条件是会直接添加在 URL 上，并且直接是一个 Object 的形式，Server 端无法进行解析。这时候就需要在 FilterSetupQuery 函数中，将 Filter 条件进行一下转换，如：通过 json.stringify(expr)将 Filter 条件转换成 JSON String。Server 端可以再通过这个 JSON String 解析还原出 Filter 的条件。
清单 3. 将 Filter 条件转换成 JSON String

1 2 3

filterSetupQuery: function(expr){     return {"filter" : json.stringify(expr)}; },

在 Gridx 的 Grid 中，一般使用 JsonRest 作为 Server 端的 store 的，它使用 GET 请求与 Server 端交互，所以请求参数会添加在 URL 上。所以上面的函数的返回值会直接添加到 URL 上发送到 Server 端。不过由于使用 URL 参数的 GET 请求在浏览器 IE 中有字节限制。当 Filter 条件比较复杂的情况，那么转换出来的 JSON String 的长度就可能会超过这个字节限制。
解决这种限制的一种方法是：将 Filter 条件转换的 JSON String 加入到 store 的 Headers 里，一起发送给 Server 端：
清单 4. 将 Filter 条件放入 Headers 里发送到 Server 端

1 2 3 4

//Omitting namespace here filterSetupQuery: function(expr){     _store.headers["filter"]= json.stringify(expr); },

如果在数据筛选的时候，还需要向 Server 端发送一些其他的参数请求，如：
清单 5. 将 Grid 的请求参数发送到 Server 端

1 2	//Omitting namespace here _model.query({"start" : …, "count" : … });

那么在添加 Server 端的 Filter 后，这些参数就会被 filterSetupQuery 产生的参数所覆盖。一种解决方案是：将这些被覆盖的参数请求也放入到 filterSetupQuery 中：
清单 6. 将其他的请求参数与 Filter 的请求一起发送到 Server 端

1 2 3 4 5

//Omitting namespace here filterSetupQuery: function(expr){     _store.headers["filter"]= json.stringify(expr);     return {"start" : …, "count" : … }; },