最近在做组织部项目中,遇到了一个棘手的问题,选择县市区类型的时候将查出的县市区数据动态添加到界面中(如图所示:霸州县、永清县),选择年份的时候,将该类型以及该年份下设置为考核对象的信息勾选,如下图:
深层次询问了指点我的人,他告诉我,是因为我没有实现过类似的功能,有了一次这样的实践,再遇到类似的也可以很快的做出来,这又是一层境界。
当遇到类似的问题可以解决之后,自己如何去深入学习与之类似的功能,思考问题的时候应该从哪方面入手,这都是值得考究的学问啊。
我的HTML代码:
-
<a>请选择县(市、区)类型:</a>
<input id="CityObjectType" class="easyui-combobox" name="checkType"
data-options="valueField:'id',textField:'text',url:'/SetCityObject/queryType',onSelect:function(){
QueryCityObjcetByType();
}" />
-
-
<a>请选择考核年份:</a>
<input id="CityCheckYear" class="easyui-combobox" name="checkType"
data-options="valueField:'CheckYearvalue' ,textField: 'CheckYeartext',
onSelect:function(){
QueryCityObjectByYearType('CityObjectcb', this.checked);
}" />
-
-
@*动态添加基础信息div*@
<div id="CityObjectcb"></div>
-
我的js对应的代码(下面代码实现了js拼接input标签和lable标签实现的显示效果):
-
//根据县市区类型查询-马康-2016-3-6 1:07:20
function QueryCityObjcetByType() {
//获取县市区类型
var CityType = $('#CityObjectType').combobox('getValue');
//判断县市区类型是否为空
if (CityType == "") {
$.messager.alert('提示', '请选择县市区类型!', 'warning');
return;
}
$.post('/SetCityObject/QueryCityBasicInfoByType?CityType=' + CityType, {}, function (data) {
//添加的时候先清除div中的数据
$("#CityObjectcb").empty();
//遍历向div中添加查询到的基础信息
$.each(data, function (i, item) {
//添加复选框以及对应的值
$("#CityObjectcb").append(
"<input id="+item.CityID+" type='checkbox'>"+
"<label for="+item.CityID+">"+
item.CityName+
"</label>");
});
})
}
-
我的js对应代码(下面代码实现了将对应的数据勾选的效果):
-
//根据年份和县市区类型,查询县市区考核对象-马康-2016-3-6 1:07:06
function QueryCityObjectByYearType(domId,value) {
//获取下拉框中的年份
var CheckYear = $('#CityCheckYear').combobox('getValue');
//判断年份是否为空
if (CheckYear == "") {
$.messager.alert('提示', '请选择年份!', 'warning');
return;
}
//获取下拉框中县市区的类型ID
var CityTypeID = $('#CityObjectType').combobox('getValue');
//判断县市区类型是否为空
if (CityTypeID == "") {
$.messager.alert('提示', '请选择县市区类型!', 'warning');
return;
}
//post提交查询的条件,并调用查询的方法,将查询到的信息返回回来
$.post('/SetCityObject/QueryCityObjectByYearType?CheckYear=' + CheckYear + '&CityTypeID=' + CityTypeID, {}, function (data) {
//获取界面上div中添加的基础信息的值
var inputs = document.getElementById(domId).getElementsByTagName("input");
//第一层循环,循环界面上系那是的div中的基础信息
for (var i = 0; i < inputs.length; i++) {
//首先将界面上的复选框去掉对勾
inputs[i].checked = false;
//循环判断设置为考核对象的进行勾选(用下面的循环遍历也可以)
//for (var n = 0; n < data.length; n++) {
// //判断考核对象中是否有id
// if (inputs[i].id == data[n].CityID) {
// //如果有,将界面上的复选框勾选
// inputs[i].checked = true;
// }
//}
//通过解析返回的json,遍历将设置为考核对象的勾选
$.each(data, function (n, item) {
//判断考核对象中是否有id
if (inputs[i].id == item.CityID) {
//如果有,将界面上的复选框勾选
inputs[i].checked = true;
}
});
}
})
}
-
从开始的没有思路——思路清晰不知道代码如何实践——让人指点,有了方向——功能实现——对应的扩展功能实现,当大概功能实现的时候,心里美滋滋的,但是后面代码优化以及功能完善也是不可忽视的问题。
深层次询问了指点我的人,他告诉我,是因为我没有实现过类似的功能,有了一次这样的实践,再遇到类似的也可以很快的做出来,这又是一层境界。
当遇到类似的问题可以解决之后,自己如何去深入学习与之类似的功能,思考问题的时候应该从哪方面入手,这都是值得考究的学问啊。