|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-02-26
最后修改：2010-06-23
最近项目里面非要实现下列列表的二级联动，由于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下测试通过，欢迎拍砖。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-03-02
大家用着好用不？
|
| 返回顶楼 | |
|
发表时间：2010-03-04
效果不错，还没真正用上。不错
|
| 返回顶楼 | |
|
发表时间：2010-03-04
效果不错哦，LZ加油
|
| 返回顶楼 | |
|
发表时间：2010-03-04
相信还是有比较多的人用GT-Grid的，这个功能在GT-Grid里面没有。应该还比较实用。
|
| 返回顶楼 | |
|
发表时间：2010-03-05
试试后，给你个答复。我正要给客户做个，简单实用的查询小页面。
|
| 返回顶楼 | |
|
发表时间：2010-03-05
lindongcheng99 写道 试试后，给你个答复。我正要给客户做个，简单实用的查询小页面。
就目前我在用的那个系统，还没出现浏览器不兼容的问题。 |
| 返回顶楼 | |
|
发表时间：2010-03-07
感觉代码量还是比较多！
|
| 返回顶楼 | |
|
发表时间：2010-03-08
tangyuanjian 写道 感觉代码量还是比较多！
这样就代码多了？笑而不语！ |
| 返回顶楼 | |
|
发表时间：2010-06-08
最后修改：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);
}
});
}
|
| 返回顶楼 | |
