根据数据指定前端单选按钮的选中状态

先上我目前采用的方法,各位可以借鉴一下:
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来选中“是”或者“否”(有时候按钮全部为“是”,有时候按钮全部为“否”),目前我是想不通哪里有问题,反正很奇怪。以后还是用索引吧,也挺简单的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值