用JQuery让GT-Grid的下拉列表实现二级联动

最近项目里面非要实现下列列表的二级联动，由于GT-Grid的下拉列表不支持二级联动，只有自己慢慢摸索了。

 

注意：1.如果用jQuery1.3.2在ie下面有问题(不能联动)，所以建议使用jQuery1.4.2；

 

更新：由于上传的附件是tomcat下的工程文件，现在修改为myeclipse工程目录。

更新2：增加了一种方法，比方法一更精确。附件并未更新，请自行更新代码。

相关代码如下：

 

$(document).ready(function() {
	var dsConfig = {
		fields : [{
			    name : 'id',
			    type : 'int'
		    }, {
			    name : 'province',
			    type : 'int'
		    }, {
			    name : 'city',
			    type : 'int'
		    }, {
			    name : 'total',
			    type : 'float'
		    }],
		uniqueField : 'id'
	};
	var colsConfig = [{
		    id : 'id',
		    header : "ID",
		    headAlign : 'center',
		    width : 80,
		    align : 'center'
	    }, {
		    id : 'province',
		    header : "省份",
		    headAlign : 'center',
		    width : 80,
		    align : 'center',
		    renderer : GT.Grid.mappingRenderer(province, '未知省份'),// 可以动态取得数据库里面的值
		    editor : {
			    type : 'select',
			    options : province
		    }
	    }, {
		    id : 'city',
		    header : "城市",
		    headAlign : 'center',
		    width : 80,
		    align : 'center',
		    renderer : GT.Grid.mappingRenderer(city, '未知城市'),// 动态取得数据库里面的值
		    editor : {
			    type : 'select',
			    // options : city //这里可以只为省份为1的城市列表。
			    options : {
				    1 : '武汉',
				    2 : '鄂州',
				    3 : '恩施',
				    4 : '黄冈',
				    5 : '黄石',
				    6 : '荆门',
				    7 : '荆州',
				    8 : '潜江'
			    }
		    }
	    }, {
		    id : 'total',
		    header : "总计",
		    headAlign : 'center',
		    width : 130,
		    align : 'center'
	    }];
	var province_value = "";// 用于存放省份下拉框值
	var gridConfig = {
		id : "grid",
		dataset : dsConfig,
		columns : colsConfig,
		container : 'grid_container',
		toolbarPosition : 'bottom',
		toolbarContent : toolbar,// 定义为一个变量，可以让不同的角色能看到不同的toolbar，达到控制角色目的
		pageSize : 10,
		pageSizeList : [5, 10, 15],
		loadURL : 'all.action',
		resizable : true,
		autoLoad : true,
		selectRowByCheck : true,
		remotePaging : false,
		onComplete : function(grid) {
			  $(".gt-menuitem:last-child").hide();
			  // 二级联动
			  if ($("#company_id").length == 0) {
				  $($(".gt-editor-text")[0]).attr("id", "company_select");
				  $($(".gt-editor-text")[1]).attr("id", "department_select");
			  }
			  $("#company_select").bind("change", function() {
				    var url = "companyLink";
				    var params = {
					    company : $('#company_select').val()
				    };
				    $.post(url, params, callBack, 'json');
				    function callBack(date) {
					    var select_value = "";
					    $.each(date.info, function(i, item) {
						      select_value = select_value + "<option value='" + item.id + "'>" + item.va + "</option>";
					      });
					    $("#department_select").html(select_value);
				    }
			    });
		  }

		clickStartEdit : false,
		reloadAfterSave : true,
		recountAfterSave : true,
		defaultRecord : {
			id : 1,
			province : 1,
			city : 1,
			total : 111.01
		}
	};
	var mygrid = new GT.Grid(gridConfig);
	GT.Utils.onLoad(GT.Grid.render(mygrid));

	

 关于如何取class，如：$(".gt-col-grid-province div")

.gt-col-grid-province为td的class，如何定义的呢？gt-col-加上这个grid的id，我的grid的id是“grid"，再加上这列的ID，就是：gt-col-grid-province.

 

 

赋值给id后两个下拉列表：

 

<div class="gt-editor-container">
			<select id="province_select" class="gt-editor-text">
				<option value="1">湖北
				</option>
				<option value="2">福建
				</option>
				<option value="3">宁夏
				</option>
			</select>
		</div>
		<div class="gt-editor-container">
			<select id="city_select" class="gt-editor-text">
				<option value="1">武汉
				</option>
				<option value="2">鄂州
				</option>
				<option value="3">恩施
				</option>
				<option value="4">黄冈
				</option>
				<option value="5">黄石
				</option>
				<option value="6">荆门
				</option>
				<option value="7">荆州
				</option>
				<option value="8">潜江
				</option>
			</select>
		</div>

 

主要是用jQuery改变#city_select下拉列表的值。 

 

部分效果图如下：

 

 

 

 

 

IE6，Firefox3.6，chrome5下测试通过，欢迎拍砖。

 

 

jQuery插件flexigrid使用总结

 

评论

12 楼 matychen 2010-07-27  

zhaozengfengw 写道

楼主  有没有双击一行 然后跳出对话框的啊

gt有个行的双击和单击事件，你可以在事件里面写个自己的实现。很简单的。

11 楼 zhaozengfengw 2010-07-27  

楼主  有没有双击一行 然后跳出对话框的啊

10 楼 matychen 2010-06-08  

onComplete : function(grid) {
			  $(".gt-menuitem:last-child").hide();
			  // 二级联动
			  if ($("#company_id").length == 0) {
				  $($(".gt-editor-text")[0]).attr("id", "company_select");
				  $($(".gt-editor-text")[1]).attr("id", "department_select");
			  }
			  $("#company_select").bind("change", function() {
				    var url = "companyLink";
				    var params = {
					    company : $('#company_select').val()
				    };
				    $.post(url, params, callBack, 'json');
				    function callBack(date) {
					    var select_value = "";
					    $.each(date.info, function(i, item) {
						      select_value = select_value + "<option value='" + item.id + "'>" + item.va + "</option>";
					      });
					    $("#department_select").html(select_value);
				    }
			    });
		  }

9 楼 matychen 2010-03-08  

tangyuanjian 写道

感觉代码量还是比较多！

这样就代码多了？笑而不语！

8 楼 tangyuanjian 2010-03-07  

感觉代码量还是比较多！

7 楼 matychen 2010-03-05  

lindongcheng99 写道

试试后，给你个答复。我正要给客户做个，简单实用的查询小页面。

就目前我在用的那个系统，还没出现浏览器不兼容的问题。

6 楼 lindongcheng99 2010-03-05  

试试后，给你个答复。我正要给客户做个，简单实用的查询小页面。

5 楼 matychen 2010-03-04  

相信还是有比较多的人用GT-Grid的，这个功能在GT-Grid里面没有。应该还比较实用。

4 楼 zhys513 2010-03-04  

效果不错哦，LZ加油

3 楼 linjianxiong 2010-03-04  

效果不错，还没真正用上。不错

2 楼 matychen 2010-03-02  

大家用着好用不？

1 楼 ming500 2010-02-26  

不错.支持一下