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

 

然后在flexigrid初始化参数中设置：onSuccess:function(){set_exeBtn(”gridtable”);}，这表示flexigrid加载完成后执行set_exeBtn函数，该函数向flexigrid的右下角加入了一个名为“执行”的按钮，并且为该按钮定义了事件updateState，该事件的定义如下：

1. function updateState(id){
2. //最后
3. $("#"+id+" tr td:last-child div:first-child").each(function(){
4. var op = $(this).text();
5. if(op == "无操作")return;
6. else{
7. var ids = $(this).parents("tr:first").children("td:first").children("div:first").text();//假定第一行的值为记录的id
8. var newStateVal = $("span:first",this).attr('lang');
9. $.ajax({
10. url:"update_msgState.php",
11. type:"POST",
12. dataType:"text/html",
13. data:"ids="+ids+"&ps="+newStateVal,
14. success:function(data){
15. if(data == "success"){
16. //reloadGrids(id); 自定义执行成功后的函数调用，可以重新调用flexigrid或者做其他操作
17. }
18. else{
19. alert("执行过程遇到错误");
20. }
21. },
22. error:function(msg){
23. alert(msg);
24. }
25. });
26. }
27. });
28. };

该事件的简要说明：该事件检查flexigrid的最后一列的值，如果不等于无操作，将以ajax的方式执行update_msgState.php程序，该程序主要用于更新flexigrid中的记录项的状态字段值，和一般程序也没什么两样，执行成功会输出success，在这里必须提及我对flexigrid.js文件的两处改动：

1. //大概1421行
2. $.fn.flexReload = function(p) { // function to reload grid
3. return this.each( function() {
4. if (this.grid&&this.p.url){
5. //roby added 2 lines 针对url参数和onSuccess被自定义后却并没有起作用，自行设置的，其他项如果也是如此，可以采用此种方法
6. if(p.url!=undefined) this.p.url=p.url;
7. if(p.onSuccess!=undefined) this.p.onSuccess=p.onSuccess;
8. if(p.sortname!=undefined){this.p.sortname=p.sortname;this.p.sortorder=p.sortorder;} this.grid.populate();}
9. });   
10. }; //end flexReload
12. //大概389行
13. if (p.total==0)
14. {
15. $('tr, a, td, div',t).unbind();
16. $(t).empty();
17. p.pages = 1;
18. p.page = 1;
19. this.buildpager();
20. $('.pPageStat',this.pDiv).html(p.nomsg);
21. //roby added 1 line 这里主要是为了使onSuccess在即便flexigrid初始化调用获得的数据为空时仍然会执行（默认不执行，至于应不应该这么做，还是看具体需求吧，我在后面的例子中会用到）
22. if (p.onSuccess) p.onSuccess();
23. return false;
24. }

写到这里，发现篇幅已经很长，而且在方式上我想最好是给出一些在线的demo，这个工作我往后有时间了再整理吧，其他的将在后续文章中完成，感谢各位的支持。