un9.28：实现点击某个字段其他字段全部回显功能。

灰太狼 2023-10-11 18:30 55阅读 0赞

在项目中，我们经常会遇到数据联动的情况，比如，点击某人的名字，相关信息全部显示出来，今天小编和大家分享这一功能，字段展示不完整，拿几个字段来做示例，大家看的时候需要区分一下。

一、数据库添加对应的字段。

![85f88581a4cc45308848ee5dd43b37a1.png][]

二、写对应的html，和数据库相对应，我是在js中拼接的html，当然，也可以直接在html中写，这个不影响的。

html += "<div class='row clearfix'>"
        html += "<input class='ipt-type' type='text' id='"+lawyerIndex+"lawyer_lawyerType' name='lawyerType' value='"+type+"' hidden/>"
        html += "<input class='ipt-type' type='text' id='"+lawyerIndex+"lawyer_lawyerId' name='lawyerId'  hidden/>"
        html += "<input class='ipt-type' type='text' id='"+lawyerIndex+"lawyer_isDelete' name='isDelete' value='0' hidden/>"
        html += "<div class='form-group col-sm-4 no-padding-left'>"
        html += "<label class='ivu-form-item-label-large-x-lg'>"
        html += "<span class='required'>*</span>律所名称："
        html += "</label>"
        html += "<div class='ivu-form-item-content-large-x-lg'>"
        html += "<input class='ipt-type' type='text' id='"+lawyerIndex+"lawyer_lawFirmName'  name='lawFirmName' required placeholder='请输入' required/>"
        html += "</div>"
        html += "</div>"
    
        html += "<div class='form-group col-sm-4' style='padding-left: 0'>"
        html += "<label class='ivu-form-item-label-x-lg'><span class='required'>*</span>律师姓名：</label>"
        html += "<div class='ivu-form-item-content-x-lg'>"
        html += "<input type='text' class='ipt-type' readonly='readonly'  placeholder='请输入' id='"+lawyerIndex+"lawyer_lawyerName' name='lawyerName' required onclick='queryLawyer(this,lawyerIndex)'/>"
        html += "</div>"
        html += "</div>"
        html += "</div>"

三、在字段上添加相应的js事件，我的是在律师姓名这个字段，那么我现在需要在input框中添加一个点击事件。

onclick='queryLawyer(this,lawyerIndex)'

四、写一个对应的函数，里边加上弹窗的内容，我新建了一个页面，在另一个页面具体实现此功能。

//获取律师信息
    function queryLawyer(obj,lawyerIndex) {
        var lawyerInfoId = "";
        layerMsg.iframeMSgSus("选择律师", "/ds/html/dsdetail/dsLawyerList.html?lawyerIndex="+lawyerIndex+"&lawyerInfoId"+lawyerInfoId, "choosePopData()", "setParentData()", "90%", "95%", bobj.confirm, bobj.cancel);
    }

五、弹窗页面。

1、取消事件，点击取消初始化此表。

function choosePopData(){
        loadInit();
    }

2、确定事件。

3、点击确定事件，给数据赋值并回显。

//选择律师信息赋值
    function setShareholder(objData,newIndex){
        if(newIndex > 1){
            newIndex = newIndex-1;
        }else{
            newIndex = 1;
        }
        console.log(objData)
        if(objData){
            $("#"+newIndex+"lawyer_lawFirmName").val(objData.lawFirmName);
            $("#"+newIndex+"lawyer_lawyerName").val(objData.lawyerName);
            $("#"+newIndex+"lawyer_lawyerCertificateNo").val(objData.layerNumber);
            $("#"+newIndex+"lawyer_lawyerLevel").val(objData.firmLevel);
        }
    }

4、初始化表格。

// 初始化表格
    function loadInit(lawyerInfoId) {
        loadMask();
        firstName(colNamesData)
        var objs = fromToJson("searchForm"); // 定义一个对象 存放保存对象
        console.log(objs)
        // objs.applicantOrgCode = orgCode;
        objs.lawyerInfoId = lawyerInfoId;
        $JQGrid.init({
            "id": "ds-lawyerList-table",
            "useCheckAll": false,
            "autoHight":true,
            "datatype": "json",
            colNames: ['序号','项目ID','手机号码','类型','律所名称'],// jqGrid的列显示名字
            colModel: [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
                {
                    name: 'lawFirmName',
                    index: 'lawFirmName',
                    hidden: false,
                },
                {
                    name: 'layerNumber',
                    index: 'layerNumber',
                    hidden: false,
                },
                {
                    name: 'firmLevel',
                    index: 'firmLevel',
                    sortable: false,
                    title: false,
                    select: false,
                    align: "center",
                    hidden: true,
                }],
            "dataUrl": "查询的接口路径",
            "data": objs,
            "jqObj": {
                "jsonReader": {
                    "root": "data.list", page: "data.pageNum", total: "data.pages",
                    records: "data.total", repeatitems: false, id: "lawyerInfoId"
                },// 设置返回数据格式
                rowNum : 20,
            }
        });
        closeMask();
    }

六、测试。

1、点击律师姓名。

![9ad8943896bf405c92b096311fa8f9e8.png][]

2、出现以下数据。

![564ab22715b34ac482262ed14581bade.png][]

3、选择一条数据，即可实现回显。

![1a73c34ad8664e54bfbc98560f986966.png][] 如此，我们便能实现弹窗中显示数据。

[85f88581a4cc45308848ee5dd43b37a1.png]: https://img-blog.csdnimg.cn/85f88581a4cc45308848ee5dd43b37a1.png
[9ad8943896bf405c92b096311fa8f9e8.png]: https://img-blog.csdnimg.cn/9ad8943896bf405c92b096311fa8f9e8.png
[564ab22715b34ac482262ed14581bade.png]: https://img-blog.csdnimg.cn/564ab22715b34ac482262ed14581bade.png
[1a73c34ad8664e54bfbc98560f986966.png]: https://img-blog.csdnimg.cn/1a73c34ad8664e54bfbc98560f986966.png