最近在做一个小项目中遇到一个问题,项目使用jqGrid,用到了行编辑。其中有一个需求是:实现select下拉框 项目→需求→任务(类似于省,市,县)的三级联动效果。
这个在行编辑中实现遇到了问题,怎么让select下拉框change的时候选择到对应的二级下拉框实现联动呢?
网上找不到很好的例子,查了api发现没找到实现联动的方法,不过我在注意事项里找到了 怎么选取ID:
行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("");
$("#"+id+"_task_id").append("");
for(var i=0;i"+data[i].requirement_name+"";
}
$(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("");
for(var i=0;i"+data[i].task_name+"";
}
$(str).appendTo($("#"+id+"_task_id"));
}
}
});
});
}