如何在JavaScript DataTable构造函数中获取{jobid}实际值并控制复选框隐藏

问题描述 #

我正在分析JavaScript的DataTable构造函数，现有一个传递复选框元素所有值的field变量，已将其拆分为field_value、field_name、field_hidden等子变量，最终返回复选框元素。目前控制台打印内容为javascript constructor {jobid}，已知{jobid}是数据字段，我需要获取它的实际值以判断是否为空，从而控制复选框是否隐藏。尝试使用jQuery.isEmptyObject(field_hidden)未成功，怀疑构造函数可能在下游被处理，无法直接操作，附上相关代码片段寻求解决方案。

相关代码片段 #

拆分字段代码 #

var field_value = field.value;
var field_name = field.name;
//The field_hidden is a passed data field to determine if I should hide checkbox. 
var field_hidden = field.hidden;

返回复选框代码 #

return '<input type="checkbox"' + field_name + htmlEncode(field_value) + field_checked+' >';

完整构造函数片段 #

{
          targets: 'dt-checkbox',
          type: 'num',
          orderDataType: 'dom-checkbox',
          render: {
            display: function(data, type, row, meta) {
              // Changes cell to checkbox given field_value and field_name

              var opts = meta.settings.aoColumns[meta.col].dt_opts;
              if(typeof opts === 'undefined') {
                opts = meta.settings.aoColumns[meta.col].dt_opts = {};
              }
              var field = opts.field
              if(typeof field === 'undefined') {
                field = opts.field = {};
              }

              var field_value = field.value;
              var field_name = field.name;
              var field_checked = field.checked;
//The field_hidden is a passed data field to determine if I should hide checkbox. 
              var field_hidden = field.hidden;

              console.log("This is the field_hidden", field_hidden);

              // Resolve fieldnames to values
              var re = /^\{(.+)\}$/;
              if(typeof(field_value) !== 'undefined' && field_value !== null) {
                var match = field_value.match(re);
                if(match) {
                  var field_value_fieldname = match[1];
                  field_value = row[field_value_fieldname];
                }
                field_value = ' value="' + field_value + '"';
              }
              if(typeof(field_name) !== 'undefined' && field_name !== null) {
                var match = field_name.match(re);
                if(match) {
                  var field_name_fieldname = match[1];
                  field_name = row[field_name_fieldname];
                }
                field_name = ' name="' + field_name + '"';
              }
              if(typeof(field_checked) !== 'undefined' && field_checked !== null) {
                var match = field_checked.match(re);
                if(match) {
                  var field_checked_fieldname = match[1];
                  field_checked = row[field_checked_fieldname]? 1:0;
                }
                field_checked = field_checked && field_checked != '0'? ' checked="checked"' : '';
              }
//This is where I was trying to see if this is a var or object, and if it is empty. No luck. 
              if(jQuery.isEmptyObject(field_hidden))
              {
                return '<input type="checkbox"' + field_name + htmlEncode(field_value) + field_checked+' >';
              }
              else
              {
                return '<input type="checkbox"' + field_name + htmlEncode(field_value) + field_checked+' hidden >';
              }
            }
          }
        },

解决方案 #

问题核心是未对field_hidden做占位符解析——你对field_value、field_name、field_checked都处理了{jobid}这类占位符，将其替换为row中的实际值，但field_hidden完全跳过了这一步，导致它还是占位符字符串，无法正确判断是否为空。同时jQuery.isEmptyObject()只适用于对象，对字符串/布尔值无效，判断逻辑也不对。

修改步骤 #

1. 复用现有正则表达式，解析field_hidden的占位符，获取row中的实际值
2. 调整判断逻辑，直接检查实际值是否有效，决定是否添加hidden属性

修改后的完整关键代码 #

{
  targets: 'dt-checkbox',
  type: 'num',
  orderDataType: 'dom-checkbox',
  render: {
    display: function(data, type, row, meta) {
      var opts = meta.settings.aoColumns[meta.col].dt_opts;
      if(typeof opts === 'undefined') {
        opts = meta.settings.aoColumns[meta.col].dt_opts = {};
      }
      var field = opts.field
      if(typeof field === 'undefined') {
        field = opts.field = {};
      }

      var field_value = field.value;
      var field_name = field.name;
      var field_checked = field.checked;
      var field_hidden = field.hidden;

      console.log("This is the field_hidden", field_hidden);

      // Resolve fieldnames to values
      var re = /^\{(.+)\}$/;
      // 解析field_value
      if(typeof(field_value) !== 'undefined' && field_value !== null) {
        var match = field_value.match(re);
        if(match) {
          var field_value_fieldname = match[1];
          field_value = row[field_value_fieldname];
        }
        field_value = ' value="' + field_value + '"';
      }
      // 解析field_name
      if(typeof(field_name) !== 'undefined' && field_name !== null) {
        var match = field_name.match(re);
        if(match) {
          var field_name_fieldname = match[1];
          field_name = row[field_name_fieldname];
        }
        field_name = ' name="' + field_name + '"';
      }
      // 解析field_checked
      if(typeof(field_checked) !== 'undefined' && field_checked !== null) {
        var match = field_checked.match(re);
        if(match) {
          var field_checked_fieldname = match[1];
          field_checked = row[field_checked_fieldname]? 1:0;
        }
        field_checked = field_checked && field_checked != '0'? ' checked="checked"' : '';
      }
      // 新增：解析field_hidden的占位符
      if(typeof(field_hidden) !== 'undefined' && field_hidden !== null) {
        var match = field_hidden.match(re);
        if(match) {
          var field_hidden_fieldname = match[1];
          field_hidden = row[field_hidden_fieldname];
        }
      }
      // 调整判断逻辑：如果field_hidden有有效值（非空、非0）则隐藏
      var shouldHide = field_hidden && field_hidden !== '0' && field_hidden !== '';
      return '<input type="checkbox"' + field_name + htmlEncode(field_value) + field_checked + (shouldHide ? ' hidden' : '') + ' >';
    }
  }
},

说明 #

• 去掉了HTML实体转义（<换成<，"换成"），JavaScript字符串中直接使用这些字符更清晰，避免转义错误
• 解析field_hidden后，判断逻辑改为检查值是否为真且不是空字符串/0，符合实际业务场景
• 不再使用jQuery.isEmptyObject()，因为解析后的field_hidden是业务数据，不是对象

内容的提问来源于stack exchange，提问作者Powermaster Prime