先上我目前采用的方法,各位可以借鉴一下:
1.数据库获取
数据获取的话,就是从前端调用Controller里面的方法函数,然后执行service方法,通过mapper来获取数据库信息,然后显示在前端界面上,这些就不细说了。
2.编辑界面获取选中的数据
选中一条数据,点击编辑,要做的事情是在弹出的编辑框中获取该条数据的值。直接在前端新建form表单变量然后获取就行,主要函数代码如下:
function child(res, index) {
var form=layui.form;
for(k in res){
$("#farmName").val(res[k].farmName);
$("#farmAddress").val(res[k].farmAddress);
$("#livestockType").val(res[k].livestockType);//--类型
$("#farmSeed").val(res[k].farmSeed);
$("#farmTotalArea").val(res[k].farmTotalArea);
$("#farmTraditionalHurdles").val(res[k].farmTraditionalHurdles);
$("#farmElevatedBed").val(res[k].farmElevatedBed);
$("#farmLowBed").val(res[k].farmLowBed);
$("#farmTown").val(res[k].farmTown);//--所在镇
$("#farmVillage").val(res[k].farmVillage);
$("#farmCounty").val(res[k].farmCounty);
if (res[k].farmCertificate == '1'){
$("input:radio").eq(2).attr('checked','true');
} else {
$("input:radio").eq(3).attr('checked','true');
}
$("#farmFarmers").val(res[k].farmFarmers);
$("#farmFarmersPhones").val(res[k].farmFarmersPhones);
if (res[k].farmProhibitedArea == '1'){
$("input:radio").eq(0).attr('checked','true');
} else {
$("input:radio").eq(1).attr('checked','true');
}
$("#farmId").val(res[k].farmId);
$("#farmLongitude").val(res[k].farmLongitude);
$("#farmLatitude").val(res[k].farmLatitude);
$("#farmLianliancunCadres").val(res[k].farmLianliancunCadres);
$("#farmCadresPhone").val(res[k].farmCadresPhone);
$("#farmSepticTank").val(res[k].farmSepticTank);
$("#farmBiogasDigester").val(res[k].farmBiogasDigester);
$("#farmStorageTank").val(res[k].farmStorageTank);
if (res[k].farmDryExcrement == '1'){
$("input:radio").eq(4).attr('checked','true');
} else {
$("input:radio").eq(5).attr('checked','true');
}
if (res[k].farmWaterImprovement == '1'){
$("input:radio").eq(6).attr('checked','true');
} else {
$("input:radio").eq(7).attr('checked','true');
}
if (res[k].farmStraight == '1'){
$("input:radio").eq(8).attr('checked','true');
} else {
$("input:radio").eq(9).attr('checked','true');
}
if (res[k].farmUseProbiotics == '1'){
$("input:radio").eq(10).attr('checked','true');
} else {
$("input:radio").eq(11).attr('checked','true');
}
if (res[k].farmTransformation == '1'){
$("input:radio").eq(12).attr('checked','true');
} else {
$("input:radio").eq(13).attr('checked','true');
}
$("#farmTotalConsumption").val(res[k].farmTotalConsumption);
$("#farmCollectionTotal").val(res[k].farmCollectionTotal);
$("#farmAbsorptiveArea").val(res[k].farmAbsorptiveArea);
$("#farmRaiseCrops").val(res[k].farmRaiseCrops);
$("#otherNames").val(res[k].otherNames);
$("#otherPhone").val(res[k].otherPhone);
$("#otherCycle").val(res[k].otherCycle);
form.render();
}
也不细说了,不是重点。
3.问题
各位也看到我的代码,我是采用索引的形式来指定按钮的,这是我目前试过的各种方法中唯一成功的。
模板是:
$(‘input:radio’).eq(索引值).attr(‘checked’, ‘true’);索引值=0,1,2…
只要你能搞清按钮的次序,基本不会有问题。
示例:
看到这里,可能有小朋友问我,说孙悟空有几个。。。咳咳。前端这边数据明明是是或者否,为什么代码里判定条件是1或者0。
那是因为我数据库的数据是1或者0,在前端获取到1/0后,我做了数据转换,对应的转成是/否了。之所以不直接在数据库录入“是/否”,是因为如果这样做,那系统处理会很久,而1/0的话会相对快很多。
4.总结
一开始是打算用按钮的name和value来定位指定的按钮,比如说:
我要指定“是”这个按钮,代码如下:
$("input:radio[name='farmProhibitedArea'][value='1']").attr('checked','true');
可是很奇怪的是,结果并不如我意,按照这样来定位各个按钮后,尽管做了if判定,但前端的编辑弹窗并没有 根据1/0来选中“是”或者“否”(有时候按钮全部为“是”,有时候按钮全部为“否”),目前我是想不通哪里有问题,反正很奇怪。以后还是用索引吧,也挺简单的。