jqGrid 行编辑 select 3级联动 的一种实现方法

最近在做一个小项目中遇到一个问题，项目使用jqGrid，用到了行编辑。其中有一个需求是：实现select下拉框 项目→需求→任务（类似于省，市，县）的三级联动效果。

这个在行编辑中实现遇到了问题，怎么让select下拉框change的时候选择到对应的二级下拉框实现联动呢？

网上找不到很好的例子，查了api发现没找到实现联动的方法，不过我在注意事项里找到了 怎么选取ID：

• 可编辑元素的id组成为 rowid+'_'+ name，name为colModel定义的name值。例如，我们编辑id为10的行，此列colModel配置的name值为myname，那么这个输入控件的id为10_myname

行colModel：

{name:'project_id',width:200,align:'center',editable: true,edittype:"select",editoptions:{value:getProject()},formatter:'select'},{name:'req_id',width:150,align:'center',editable: true,edittype:"select",editoptions:{value:getRequirement()},formatter:'select'},{name:'task_id',width:150,align:'center',editable: true,edittype:"select",editoptions:{value:getTask()},formatter:'select'},

初始化select：

//动态获取Project下拉框function getProject() {var str = "";$.ajax({type : "post",async : false,url : "timeSheet!selectProject.action",success : function(data) {if (data != null) {str = data;}}});return str;}// 动态获取Repuirement下拉框function getRequirement() {var str = "";$.ajax({type : "post",async : false,url : "timeSheet!selectRequirement.action",success : function(data) {if (data != null) {str = data;}}});return str;}// 动态获取Task下拉框function getTask() {var str = "";$.ajax({type : "post",async : false,url : "timeSheet!selectTask.action",success : function(data) {if (data != null) {str = data;}}});return str;}

我是用双击事件打开行编辑的，顺便也拿到了行ID，所以代码如下：

ondblClickRow: function(id){ if(id){ //这部分代码是切换编辑行的时候前一次选择的行还原为原来的数据。jQuery('#timeGrid').jqGrid('restoreRow',lastSelect); jQuery('#timeGrid').jqGrid('editRow',id,true); lastSelect=id; }//先将二级和三级联动select置为disable，防止用户不按顺序编辑。$("#"+id+"_req_id").attr('disabled',true);$("#"+id+"_task_id").attr('disabled',true);$("#"+id+"_project_id").change(function() {//获取项目的值var selectProject = $("#"+id+"_project_id").val();//将二级联动打开$("#"+id+"_req_id").attr('disabled',false);//清空二级和三级联动下拉框的值$("#"+id+"_req_id").empty();$("#"+id+"_task_id").empty();if(selectProject=="") return ;$.ajax({url:"timeSheet!selectReqLink.action?reqEntity.belong_project_id="+selectProject,type:"post",dataType:"json",  // 接受数据格式error:function(){alert("请求失败!");},success:function(data){if(data!=null && data!=""){var str="";$("#"+id+"_req_id").append("<option value=0>请选择</option>");$("#"+id+"_task_id").append("<option value=0>请选择</option>");for(var i=0;i<data.length;i++){str+="<option value='"+data[i].req_id+"'>"+data[i].requirement_name+"</option>"; } $(str).appendTo($("#"+id+"_req_id"));  }}});});//任务下拉框联动$("#"+id+"_req_id").change(function() {var selectReq = $("#"+id+"_req_id").val();$("#"+id+"_task_id").attr('disabled',false);$("#"+id+"_task_id").empty();if(selectReq=="") return ;$.ajax({url:"timeSheet!selectTaskLink.action?taskEntity.belong_req_id="+selectReq,type:"post",dataType:"json",  // 接受数据格式 error:function(){alert("请求失败!");},success:function(data){if(data!=null && data!=""){var str="";$("#"+id+"_task_id").append("<option value=0>请选择</option>");for(var i=0;i<data.length;i++){str+="<option value='"+data[i].task_id+"'>"+data[i].task_name+"</option>"; } $(str).appendTo($("#"+id+"_task_id"));  }}});});}

完成后的效果是这样的：


我这样实现是把初始化select的ajax和后来联动去后台获取数据的ajax分开了。
这种方法存在一个问题，就是必须按序修改下拉框的值，比如我明明只想修改下需求，要实现的话就必须先再选择一次项目，而且还要实现change事件orz...才能打开二级联动。
没办法，先用着吧，慢慢再研究有没有更好的实现方式，如果我以后有更好的实现方式，我会再放上来的。
小菜鸟一枚，刚开始接触jqGrid，记录下来，希望各位路过的大牛们能给予指点。