模态框动态赋值

模态框动态赋值，可以有多种方式：1、每次一个个填充；2、直接针对模态框中的ID赋值。。。

今天说下同事犯的错误，大家引以为鉴：

首先如图：

他在点击详情链接时，是能拿到相关参数的，进去具体模态框后的数据都是可以获取的，不需要走后台就可以完成，如下：

弹出框左上方的【待确认】以及【已确认】是他提前在弹框中隐藏的内容，用了hidden

 <h4 class="modal-title">确认<small id="record" hidden="hidden" style="color: #ff452e">（待确认）</small></h4>

他js里想通过id的show方法来不同展示。如下：

 /*
    * 详情页
    * */
   function detail(record) {
       console.log(record);
       var o = $('#window-detail');

       $(o.find('select[name="departmentID"]')).select({
           url: '/department/get_',
           name: 'departmentID',
           value: record.departmentEntity.id,
//           display: record== null ? '': record.departmentEntity.name,
//           all: true,

       });

       $(o.find('select[name="supplier"]')).select({
           url: '/supplier/get_',
           name: 'supplier',
           value:  record.relyProposeConfirmEntity.supplierID.id,
//           display: record.relyProposeConfirmEntity.supplierID== null ? '': $(o.find('select[name="supplier"] option[value ="' + record.relyProposeConfirmEntity.supplierID + '" ]' ))[0].innerHTML,
//           all: true,
//           allText: '选择供方'
       });

       $(o.find('select[name="customer"]')).select({
           url: '/customer/get_',
           name: 'customer',
           value: record.relyProposeConfirmEntity.customerID.id,
//           display: record.relyProposeConfirmEntity.customerID== null ? '': $(o.find('select[name="customer"] option[value ="' + record.relyProposeConfirmEntity.customerID + '" ]' ))[0].innerHTML,
//           all: true,
//           allText: '选择客户'
       });

       $(o.find('select[name="category"]')).select({
           url: '/category/get_',
           name: 'category',
           value: record.relyProposeConfirmEntity.categoryID.id,
//           display: record.relyProposeConfirmEntity.categoryID== null ? '': $(o.find('select[name="category"] option[value ="' + record.relyProposeConfirmEntity.categoryID + '" ]' ))[0].innerHTML,
//           all: true,
       });

       $(o.find('select[name="nature"]')).select({
           url: '/nature/get_',
           name: 'nature',
           value:record.relyProposeConfirmEntity.natureID.id,
//           display: record.relyProposeConfirmEntity.natureID== null ? '': $(o.find('select[name="nature"] option[value ="' + record.relyProposeConfirmEntity.natureID + '" ]' ))[0].innerHTML,
//           all: true,
       });


       $(o.find('select[name="workLineID"]')).select({
           url: '/workLine/get_',
           name: 'workLineID',
           value: record.relyProposeConfirmEntity.workLineID.id,
//           display: record.relyProposeConfirmEntity.workLineID== null ? '': $(o.find('select[name="workLineID"] option[value ="' + record.relyProposeConfirmEntity.workLineID + '" ]' ))[0].innerHTML,
//           all: true,
       });

       $(o.find('input[name="presenter"]')).val(record.relyProposeConfirmEntity.presenterName);
       $(o.find('input[name="machineType"]')).val(record.relyProposeConfirmEntity.machineType);
       $(o.find('input[name="beltLineName"]')).val(record.relyProposeConfirmEntity.beltLineName);
       $(o.find('input[name="partsName"]')).val(record.relyProposeConfirmEntity.partsName);
       $(o.find('input[name="designation"]')).val(record.relyProposeConfirmEntity.designation);
       $(o.find('input[name="content"]')).val(record.relyProposeConfirmEntity.content);
       $(o.find('input[name="count"]')).val(record.relyProposeConfirmEntity.count);

       $(o.find('input[name="code"]')).val(record.code);
       $(o.find('input[name="emergyType"]')).val('S001');

//       $(o.find('input[name="count"]')).val(record.relyProposeConfirmEntity.count);

       $(o.find('input[name="remarks"]')).val(record.relyProposeConfirmEntity.remarks);

       if(record.relyProposeConfirmEntity.emergencySort == 'N'){
           $(o.find('select[name="urgent"] option[value ="N" ]' )).attr("selected","selected");
       }else {
           $(o.find('select[name="urgent"] option[value ="Y" ]' )).attr("selected","selected");
           show()
       }
       o.modal();
   }

这样会存在问题：模态框又不清空，不停滴show，肯定会错乱啊，这种方式就应该强制赋样式给每个隐藏域

document.getElementById("#record").style.display = "none"

猜你喜欢