Question

我的系统中有Master表，管理员可以在该表中添加/编辑/删除记录。这些记录通常是带描述的代码。用户只需选择代码/名称，并在文本输入字段中填充。最近我得到了一些关于这项工作的反馈，他们想要改变它。我只是想做出正确的决定，因为我认为要求改变可能会导致一些问题。这是一个例子：

var myJSON = {
  positions: [{
      name: "Programmer",
      code: 135
    },
    {
      name: "Developer",
      code: 170
    },
    {
      name: "Secretary",
      code: 35
    },
    {
      name: "Supervisor",
      code: 45
    }
  ]
}

$('.modal-master').on('keyup', showMasterModal);
$('.modal-master').on('click', showMasterModal);

function showMasterModal(e) {
  e.preventDefault();
  var elementID = e.target.id,
    searchVal = $.trim($(this).val()),
    fldID = elementID === "frm_position1" ? 'frm_position1' : 'frm_position2';

  if ((fldID === "frm_position1" && searchVal.length >= 1) || fldID === "frm_position2") {
    var jsonData = myJSON.positions,
      modalTbl = "<table id='masterRecords' class='table table-hover stripe'><thead><tr><th>Code</th><th>Name</th><th></th></tr></thead><tbody>";

    for (key in jsonData) {
      modalTbl += "<tr><td>" + $.trim(jsonData[key].code) + "</td>";
      modalTbl += "<td>" + $.trim(jsonData[key].name) + "</td>";
      modalTbl += "<td class='text-center'><button type='button' class='btn btn-default btn-sm choose-masterItem'><span class='glyphicon glyphicon-hand-up'></span></button></td></tr>";

    }

    modalTbl += "</tbody></table>";
    $('#master_modalTbl').empty().append(modalTbl);
    buildDataTable('masterRecords', [2], 5);
    $('#masterModal').modal('show');

    $('#masterRecords').on('click', ':button.choose-masterItem', function() {
      var itemCode = $(this).closest('tr').find('td:eq(0)').text(),
        itemName = $(this).closest('tr').find('td:eq(1)').text();
      $('#' + fldID).val(itemCode).attr('title', '(' + itemCode + ') ' + itemName);
      $('#masterModal').modal('hide');
    });
  }
};

function buildDataTable(tblID, columnsArray, displayLength) {
  $('#' + tblID).DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    "iDisplayLength": displayLength,
    "aoColumnDefs": [{
      'bSortable': false,
      'aTargets': columnsArray
    }]
  });
}

<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--- *** Start: JS and CSS for DataTables. *** --->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />
<!--- *** End: JS and CSS for DataTables. *** --->

<div class="form-group">
  <label class="control-label" for="position1"><span class="label label-info">Position 1:</span></label>
  <input type="text" class="form-control modal-master" name="frm_position1" id="frm_position1" maxlength="50" placeholder="Enter at least one letters of Position name">
</div>
<div class="form-group">
  <label class="control-label" for="position2"><span class="label label-info">Position 2:</span></label>
  <div class="input-group">
    <input type="text" class="form-control" name="frm_position2" id="frm_position2" maxlength="50" readonly>
    <div class="input-group-btn">
      <button class="btn btn-primary modal-master" id="btn_pos">
        <i class="glyphicon glyphicon-plus-sign"></i>
      </button>
    </div>
  </div>
</div>

<div id="masterModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Master</h4>
      </div>
      <div class="modal-body table-responsive" id="master_modalTbl">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

在上面的示例中，您可以看到两种获取位置名称和方式的方法。码。我的原始解决方案是按钮。用户可以单击加号按钮查看所有位置。然后他们可以搜索数据表或切换页面。这样，所有记录都可用，并且可以搜索它们。输入字段设置为只读，这将防止用户错误地输入一些损坏或不完整的数据。第一个解决方案，他们可以键入至少一个字母，然后搜索他们所要求的。我反对帽子解决方案，因为他们可以部分输入名称或代码，然后不从弹出模式中选择一个，这将是不正确的数据。我还在辩论我是否应该在输入字段中保存代码和名称，或者只是命名并将代码保存在title属性或其他方面？ Web开发中是否有这种情况的标准？我正在寻找方便，干净的解决方案，用户也会感到满意。

搜索代码/名称，然后在输入文本字段中显示给用户？

0 个答案: