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("");
						$("#"+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"));  
				}
			}
	});
	});
}


完成后的效果是这样的:
jqGrid 行编辑 select 3级联动 的一种实现方法_第1张图片

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


你可能感兴趣的:(jquery)