一直有在从事flexigrid的应用，但的确有些忙，一些整理和保密（一些应用中涉及机密的内容要去掉）工作也感觉会挺繁琐，只好慢慢来吧。
谈到改造，先说一下我们一般都会有哪些比较典型的应用吧，比如在数据上的点击增加点事件，比如加一个筛选记录的操作入口，比如编辑某条记录等等，这些至少是我工作中实实在在的需求。那么在这里，限于篇幅和个人精力，我们做三个方面的改造。
a).增加按钮事件
b).显示某个时间区间内的数据，且可以选择时间区间
c).根据输入的条件筛选数据
对于需求a，我们对按钮事件的期望当然是去完成某项操作，在这里讨论的是和服务端有交互的事件，在flexigrid的一些高级例子中，给出了“增加”和“删除”按钮，但未给出交互示例，其实作者意图也是告诉我们该增加怎样的按钮，按钮放在哪里，按钮该干什么事情等等，都是可以让我们自定义的。如对于“增加”和“删除”按钮事件，我们可以这里来处理：
首先在flexigrid的定义中增加这样的设置，
-
buttons?:?[
-
? ? ? ? ? ? ? ??{name:?'添加版本',?bclass:?'addonpress?:?versionMan},
-
? ? ? ? ? ? ? ??{name:?'删除版本'delete
? ? ? ? ? ? ? ??{separator:?true}
-
],
表示要给flexigrid增加两个按钮，名为“增加”和“删除”，分别用“add”和“delete”的class来修饰，且都调用了一个名为versionMan的函数，并且按钮直接启用了分隔符。
至于versionMan函数，完全可以自定义要做的事情。如在示例中我这样进行了定义（主要是看看结构，可以根据自己的需求进行更改）：
-
function?versionMan(com,grid){
-
? ? ? ??if(com?==?"添加版本"){
-
? ? ? ? ? ??type?=?"insert";
-
? ? ? ? ? ??//mask(); 给弹出的div加入遮罩效果
-
? ? ? ? ? ??//_initVal();初始化弹出div的函数调用，这里均可自定义
-
? ? ? ? ? ? $("#edit_versionDiv").css("top",(document.documentElement.scrollTop+260)+"px").show();
-
? ? ? ??}
-
? ? ? ??else?if(com?==?"删除版本"){
-
? ? ? ? ? ??if($('.trSelectedgrid).length==0){
-
? ? ? ? ? ? ? ??alert("请先选中要删除的版本");return?false;
-
? ? ? ? ? ??}
-
? ? ? ? ? ??if(confirm('删除?'?+ $(grid).length?+?'?版本?')){
-
? ? ? ? ? ? ? ??var?versionArr=$(".trSelected td:eq(2) div:first-childgrid);
-
? ? ? ? ? ? ? ??var?versionStr?=?new?Array();
-
? ? ? ? ? ? ? ??for(var?i=0;?i<versionArr.length;i++){
-
? ? ? ? ? ? ? ? ? ??versionStr.push($(versionArr[i]).text());
-
? ? ? ? ? ? ? ??}
-
? ? ? ? ? ? ? ? $.ajax({
-
? ? ? ? ? ? ? ? ? ??type:?"POST
? ? ? ? ? ? ? ? ? ??url:??"del_version.php
? ? ? ? ? ? ? ? ? ??data:?"ids="+versionStr.join(","),
-
? ? ? ? ? ? ? ? ? ??success:?function(msg){
-
? ? ? ? ? ? ? ? ? ? ? ??if(msg=="success"){
-
? ? ? ? ? ? ? ? ? ? ? ? ? ? $("#version_man").flexReload({});
-
? ? ? ? ? ? ? ? ? ? ? ??}
-
? ? ? ? ? ? ? ? ? ? ? ??else?alert("有错误发生");
-
? ? ? ? ? ? ? ? ? ??},
-
? ? ? ? ? ? ? ? ? ??error:?function(msg){
-
? ? ? ? ? ? ? ? ? ? ? ??alert(msg);
-
? ? ? ? ? ? ? ? ? ??}
-
? ? ? ? ? ? ? ??});
-
? ? ? ? ? ??}
-
? ? ? ??}
-
? ??};
上面的示例中需要注意的是：使用ajax方法调用一个php脚本并传入参数，从而执行了需要的操作，php脚本的写法并没有什么不同，就像普通的处理即可，然后$(”#version_man”).flexReload({});这里表示重新调用了flexigrid控件。
除了上面这种通过定义的接口增加按钮和事件的方式，我们还可以采用完全自定义的方式来达到同样的效果，如可以这样来进行：
-
function?set_exeBtn(id){
-
? ??if($("#"+id).parent().siblings(".pDiv").children(".pDiv2"div:last").contents("input").length?==?0){
-
? ? ? ??var?str?=?'<div class="btnseparator"></div><div class="pGroup" style="float:right"><input type="button" onclick="updateS
-
tate(''+id+'')" class="button" value="执行" /></div>';
-
? ? ? ? $(").append(str);
-
? ??}
-
};
然后在flexigrid初始化参数中设置：onSuccess:function(){set_exeBtn(”gridtable”);}，这表示flexigrid加载完成后执行set_exeBtn函数，该函数向flexigrid的右下角加入了一个名为“执行”的按钮，并且为该按钮定义了事件updateState，该事件的定义如下：
-
function?updateState(id){
- //最后
-
? ? ? ? $("+id+"?tr td:last-child div:first-child").each(function(){
-
? ? ? ? ? ??var?op?= $(this).text();
-
? ? ? ? ? ??if(op?==?"无操作")return;
-
? ? ? ? ? ??else{
-
? ? ? ? ? ? ? ??var?ids?= $(this).parents("tr:first"td:first"div:first").text();//假定第一行的值为记录的id
-
? ? ? ? ? ? ? ??var?newStateVal?= $("span:firstthis).attr('lang');
-
? ? ? ? ? ? ? ? $.ajax({
-
? ? ? ? ? ? ? ? ? ??url:"update_msgState.php
? ? ? ? ? ? ? ? ? ??type:
? ? ? ? ? ? ? ? ? ??dataType:"text/html
? ? ? ? ? ? ? ? ? ??data:"+ids+"&ps="+newStateVal,
-
? ? ? ? ? ? ? ? ? ??success:function(data){
-
? ? ? ? ? ? ? ? ? ? ? ??if(data?==?"){
-
? ? ? ? ? ? ? ? ? ? ? ? ? ??//reloadGrids(id); 自定义执行成功后的函数调用，可以重新调用flexigrid或者做其他操作
-
? ? ? ? ? ? ? ? ? ? ? ??}
-
? ? ? ? ? ? ? ? ? ? ? ??else{
-
? ? ? ? ? ? ? ? ? ? ? ? ? ??alert("执行过程遇到错误");
-
? ? ? ? ? ? ? ? ? ? ? ??}
-
? ? ? ? ? ? ? ? ? ??},
-
? ? ? ? ? ? ? ? ? ??error:function(msg){
-
? ? ? ? ? ? ? ? ? ? ? ??alert(msg);
-
? ? ? ? ? ? ? ? ? ??}
-
? ? ? ? ? ? ? ??});
-
? ? ? ? ? ??}
-
? ? ? ??});
-
? ??};
该事件的简要说明：该事件检查flexigrid的最后一列的值，如果不等于无操作，将以ajax的方式执行update_msgState.php程序，该程序主要用于更新flexigrid中的记录项的状态字段值，和一般程序也没什么两样，执行成功会输出success，在这里必须提及我对flexigrid.js文件的两处改动：
- //大概1421行
-
? ? $.fn.flexReload?=?function(p)?{?// function to reload grid
-
? ? ? ??return?this.each(?function()?{
-
? ? ? ? ? ? ? ??if?(this.grid&&this.p.url){
-
? ? ? ? ? ? ? ? ? ??//roby added 2 lines? 针对url参数和onSuccess被自定义后却并没有起作用，自行设置的，其他项如果也是如此，可以采用此种方法
-
? ? ? ? ? ? ? ? ? ??if(p.url!=undefined)?this.p.url=p.url;
-
? ? ? ? ? ? ? ? ? ??if(p.onSuccess!=undefined)?this.p.onSuccess=p.onSuccess;
-
? ? ? ? ? ? ? ? ? ??if(p.sortname!=undefined){this.p.sortname=p.sortname;this.p.sortorder=p.sortorder;}?this.grid.populate();}
-
? ? ? ? ? ??});? ? ? ? ? ??
-
? ??};?//end flexReload
- ?
- //大概389行
-
? ??if?(p.total==0)
-
? ??{
-
? ? ? ? ? ? ? ? ? ? $('tr,a,td,divt).unbind();
-
? ? ? ? ? ? ? ? ? ? $(t).empty();
-
? ? ? ? ? ? ? ? ? ??p.pages?=?1;
-
? ? ? ? ? ? ? ? ? ??p.page?=?1;
-
? ? ? ? ? ? ? ? ? ??this.buildpager();
-
? ? ? ? ? ? ? ? ? ? $('.pPageStatthis.pDiv).html(p.nomsg);
-
? ? ? ? ? ? ? ? ? ??//roby added 1 line 这里主要是为了使onSuccess在即便flexigrid初始化调用获得的数据为空时仍然会执行（默认不执行，至于应不应该这么做，还是看具体需求吧，我在后面的例子中会用到）
-
? ? ? ? ? ? ? ? ? ??if?(p.onSuccess)?p.onSuccess();
-
? ? ? ? ? ? ? ? ? ??return?false;
-
? ??}
写到这里，发现篇幅已经很长，而且在方式上我想最好是给出一些在线的demo，这个工作我往后有时间了再整理吧，其他的将在后续文章中完成，感谢各位的支持。
