玩转jquery插件之flexigrid（二）来点改造如何？

 

之前写到：玩转jquery插件之flexigrid（一）如何获取并使用flexigrid？挺受欢迎，后来倒是一直有在从事flexigrid的应用，但的确有些忙，一些整理和保密（一些应用中涉及机密的内容要去掉）工作也感觉会挺繁琐，只好慢慢来吧。
谈到改造，先说一下我们一般都会有哪些比较典型的应用吧，比如在数据上的点击增加点事件，比如加一个筛选记录的操作入口，比如编辑某条记录等等，这些至少是我工作中实实在在的需求。那么在这里，限于篇幅和个人精力，我们做三个方面的改造。
a).增加按钮事件
b).显示某个时间区间内的数据，且可以选择时间区间
c).根据输入的条件筛选数据

对于需求a，我们对按钮事件的期望当然是去完成某项操作，在这里讨论的是和服务端有交互的事件，在flexigrid的一些高级例子中，给出了“增加”和“删除”按钮，但未给出交互示例，其实作者意图也是告诉我们该增加怎样的按钮，按钮放在哪里，按钮该干什么事情等等，都是可以让我们自定义的。如对于“增加”和“删除”按钮事件，我们可以这里来处理：
首先在flexigrid的定义中增加这样的设置，

1. buttons : [
2. {name: '添加版本', bclass: 'add', onpress : versionMan},
3. {name: '删除版本', bclass: 'delete', onpress : versionMan},
4. {separator: true}
5. ],

表示要给flexigrid增加两个按钮，名为“增加”和“删除”，分别用“add”和“delete”的class来修饰，且都调用了一个名为versionMan的函数，并且按钮直接启用了分隔符。
至于versionMan函数，完全可以自定义要做的事情。如在示例中我这样进行了定义（主要是看看结构，可以根据自己的需求进行更改）：

1. function versionMan(com,grid){
2. if(com == "添加版本"){
3. type = "insert";
4. //mask(); 给弹出的div加入遮罩效果
5. //_initVal();初始化弹出div的函数调用，这里均可自定义
6. $("#edit_versionDiv").css("top",(document.documentElement.scrollTop+260)+"px").show();
7. }
8. else if(com == "删除版本"){
9. if($('.trSelected',grid).length==0){
10. alert("请先选中要删除的版本");return false;
11. }
12. if(confirm('删除 ' + $('.trSelected',grid).length + ' 版本?')){
13. var versionArr=$(".trSelected td:eq(2) div:first-child",grid);
14. var versionStr = new Array();
15. for(var i=0; i<versionArr.length;i++){
16. versionStr.push($(versionArr[i]).text());
17. }
18. $.ajax({
19. type: "POST",
20. url: "del_version.php",
21. data: "ids="+versionStr.join(","),
22. success: function(msg){
23. if(msg=="success"){
24. $("#version_man").flexReload({});
25. }
26. else alert("有错误发生");
27. },
28. error: function(msg){
29. alert(msg);
30. }
31. });
32. }
33. }
34. };

上面的示例中需要注意的是：使用ajax方法调用一个php脚本并传入参数，从而执行了需要的操作，php脚本的写法并没有什么不同，就像普通的处理即可，然后$(”#version_man”).flexReload({});这里表示重新调用了flexigrid控件。
除了上面这种通过定义的接口增加按钮和事件的方式，我们还可以采用完全自定义的方式来达到同样的效果，如可以这样来进行：

1. function set_exeBtn(id){
2. if($("#"+id).parent().siblings(".pDiv").children(".pDiv2").children("div:last").contents("input").length == 0){
3. var str = '<div class="btnseparator"></div><div class="pGroup" style="float:right"><input type="button" οnclick="updateS
4. tate(\''+id+'\')" class="button" value="执行" /></div>';
5. $("#"+id).parent().siblings(".pDiv").children(".pDiv2").append(str);
6. }
7. };