用jQuery让GT-Grid的下拉列表实现二级联动
2010-02-26最近项目里面要实现下列列表的二级联动，由于GT-Grid的下拉列表不支持二级联动，自己实现了这个功能。
如果用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下拉列表的值。
部分效果图如下：
