隐藏来自JSON的第一列

时间：2018-02-21 06:34:24

标签： javascript jquery html json

我带来json数据和绑定成功通话。所以我的json如下所示

[{"APP_MST_ID":1.0,"APPLICATIONNAME":"LCO Mapping Application","URL":"Jiogis.ril.com/GraniteReverseIntegration//Test","PROJECTNO":"R4G-25-APD-128","VSSFOLDERLOC":"$/R4GGISNEPRODUCTION/128_LCO Mapping/02_Source_Code","SPOCUSER":"Prasad1.shinde","REQUESTEDBY":"Sanjive.kumar","DELIVERYMANAGER":"Jaganmohan.kudikala"}]

我想要的是，我想要隐藏第一列APP_MST_ID及其值1.0。

我以下面的格式绑定数据

success: function (data) {

  var html = '';

  if (data == "") {
    $("#dvTable").html('No Data Found');
  }

  else {
    var i = 0;

    var rData = JSON.parse(data);

    if (rData.length !== 0) {

      html += '<div class="table-responsive"><table class="table table-blue">';

      for (var key in rData) {

        var row = rData[key];

        if (key == 0) {
          html += '<tr>';
          for (var key2 in row) {
            html += '<th>';
            html += key2;
            html += '</th>';
          }
          html += '</tr>';
        }

        html += '<tr>';

        for (var key2 in row) {

          if (ddlSelectedVal == "Application") {
            if (i == 1) {
              html += "<td><a href=/Application/Index/" + row['APP_MST_ID'] + " class='menuCall'> " + row["APPLICATIONNAME"] + "</a></td>";
            }
            else {
              html += '<td>';
              html += row[key2];
            }
          }

          else if (ddlSelectedVal == "Services") {
            if (i == 1) {
              html += "<td><a href=/PlatformManager/Index/" + row['FOLDER_ID'] + " class='menuCall'> " + row["SERVICENAME"] + "</a></td>";
            }
            else {
              html += '<td>';
              html += row[key2];
            }
          }

          else {
            html += '<td>';
            html += row[key2];
          }

          i++;

          html += '</td>';
        }

        i = 0;
        html += '</tr>';
      }
      html += '</table></div>';
    }

    else {
      html += "No Data Found";
    }

    $("#dvTable").html(html);
  }
}

那么我怎么能隐藏列及其值。请建议。

3 个答案:

答案 0 :(得分：2)

第一个选项：只是不要在循环中包含它。

请注意标题，key2 != 'APP_MST_ID'不包括<th>

在身体上，您可以添加else if (i != 0)

注意：确保APP_MST_ID是对象的第一个元素。

＆＃13;
＆＃13; 
$(function() {
  var rData = [{
    "APP_MST_ID": 1.0,
    "APPLICATIONNAME": "LCO Mapping Application",
    "URL": "Jiogis.ril.com/GraniteReverseIntegration//Test",
    "PROJECTNO": "R4G-25-APD-128",
    "VSSFOLDERLOC": "$/R4GGISNEPRODUCTION/128_LCO Mapping/02_Source_Code",
    "SPOCUSER": "Prasad1.shinde",
    "REQUESTEDBY": "Sanjive.kumar",
    "DELIVERYMANAGER": "Jaganmohan.kudikala"
  }];
  var html = "";
  var ddlSelectedVal = "Application";
  var i = 0;

  html += '<div class="table-responsive"><table class="table table-blue">';

  for (var key in rData) {

    var row = rData[key];

    if (key == 0) {
      html += '<tr>';
      for (var key2 in row) {
        if (key2 != 'APP_MST_ID') {
          html += '<th>';
          html += key2;
          html += '</th>';
        }
      }
      html += '</tr>';
    }

    html += '<tr>';

    for (var key2 in row) {

      if (ddlSelectedVal == "Application") {
        if (i == 1) {
          html += "<td><a href=/Application/Index/" + row['APP_MST_ID'] + " class='menuCall'> " + row["APPLICATIONNAME"] + "</a></td>";
        } else if (i != 0) {
          html += '<td>';
          html += row[key2];
        }
      } else if (ddlSelectedVal == "Services") {
        if (i == 1) {
          html += "<td><a href=/PlatformManager/Index/" + row['FOLDER_ID'] + " class='menuCall'> " + row["SERVICENAME"] + "</a></td>";
        } else if (i != 0) {
          html += '<td>';
          html += row[key2];
        }
      } else {
        html += '<td>';
        html += row[key2];
      }

      i++;

      html += '</td>';
    }

    i = 0;
    html += '</tr>';
  }
  html += '</table></div>';

  $("#dvTable").html(html);

});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvTable"></div>
＆＃13;
＆＃13;
＆＃13;

第二个选项：添加

后使用jQuery hide

＆＃13;
＆＃13; 
$(function() {
  var rData = [{
    "APP_MST_ID": 1.0,
    "APPLICATIONNAME": "LCO Mapping Application",
    "URL": "Jiogis.ril.com/GraniteReverseIntegration//Test",
    "PROJECTNO": "R4G-25-APD-128",
    "VSSFOLDERLOC": "$/R4GGISNEPRODUCTION/128_LCO Mapping/02_Source_Code",
    "SPOCUSER": "Prasad1.shinde",
    "REQUESTEDBY": "Sanjive.kumar",
    "DELIVERYMANAGER": "Jaganmohan.kudikala"
  }];
  var html = "";
  var ddlSelectedVal = "Application";
  var i = 0;

  html += '<div class="table-responsive"><table class="table table-blue">';

  for (var key in rData) {

    var row = rData[key];

    if (key == 0) {
      html += '<tr>';
      for (var key2 in row) {
        html += '<th>';
        html += key2;
        html += '</th>';
      }
      html += '</tr>';
    }

    html += '<tr>';

    for (var key2 in row) {

      if (ddlSelectedVal == "Application") {
        if (i == 1) {
          html += "<td><a href=/Application/Index/" + row['APP_MST_ID'] + " class='menuCall'> " + row["APPLICATIONNAME"] + "</a></td>";
        } else {
          html += '<td>';
          html += row[key2];
        }
      } else if (ddlSelectedVal == "Services") {
        if (i == 1) {
          html += "<td><a href=/PlatformManager/Index/" + row['FOLDER_ID'] + " class='menuCall'> " + row["SERVICENAME"] + "</a></td>";
        } else {
          html += '<td>';
          html += row[key2];
        }
      } else {
        html += '<td>';
        html += row[key2];
      }

      i++;

      html += '</td>';
    }

    i = 0;
    html += '</tr>';
  }
  html += '</table></div>';

  $("#dvTable").html(html).promise().done(function() {
    var index = $("#dvTable table tr th:contains(APP_MST_ID)").index();
    $("#dvTable table tr th").eq(index).hide();
    $("#dvTable table tr td").eq(index).hide();
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvTable"></div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

如果您不想在任何地方使用 APP_MST_ID ，可以在该行上使用删除运算符来删除APP_MST_ID。

delete row.APP_MST_ID;

如果您不想要 APP_MST_ID 进行渲染。你可以在for循环中跳过它。

for (var key2 in row) {
   if(key2 === "APP_MST_ID") continue;
   ...
   ...
}

答案 2 :(得分：0)

构建列名列表。 最好从返回的响应数据中的第一项提前过滤掉不需要的列。

这里有几个重构：

  1. 从数组构建标记而不是连接字符串。
  2. 避免使用幻数。
  3. 使用策略添加单元格。

    4. ＆＃13;
    ＆＃13; 
    var endpointPath = {
  Application: '/Application/Index',
  Services: '/PlatformManager/Index',
}

var endpointTermKey = {
  Application: 'APP_MST_ID',
  Services: 'FOLDER_ID',
}

var endpointTitleKey = {
  Application: 'APPLICATIONNAME',
  Services: 'SERVICENAME'
}

var cellFactory = {
  APPLICATIONNAME: function(columnName, data, selectedVal) {
    return [
      '<td>',
      '<a href="',
      endpointPath[selectedVal],
      data[endpointTermKey[selectedVal]],
      '">',
      data[endpointTitleKey[selectedVal]],
      '</a>',
      '</td>'
    ].join('');
  },
  DEFAULT: function(columnName, data) {
    return [
      '<td>',
      data[columnName],
      '</td>'
    ].join('');
  }
}

var rowFactory = {
  heading: function(columns) {
    var thead = ['<thead>'];
    for (var heading of columns) {
      var th = [
        '<th>',
        heading,
        '</th>',
      ].join('');
      thead.push(th);
    }
    thead.push('</thead>');
    return thead.join('');
  },
  addCell: function(columnName, item, ddlSelectedVal) {
    return (cellFactory[columnName] || cellFactory.DEFAULT)(columnName, item, ddlSelectedVal);
  }
}

$(document).ready(function() {

  var data = JSON.stringify([{
    "APP_MST_ID": 1.0,
    "APPLICATIONNAME": "LCO Mapping Application",
    "URL": "Jiogis.ril.com/GraniteReverseIntegration//Test",
    "PROJECTNO": "R4G-25-APD-128",
    "VSSFOLDERLOC": "$/R4GGISNEPRODUCTION/128_LCO Mapping/02_Source_Code",
    "SPOCUSER": "Prasad1.shinde",
    "REQUESTEDBY": "Sanjive.kumar",
    "DELIVERYMANAGER": "Jaganmohan.kudikala"
  }]);
  var ddlSelectedVal = 'Application';
  var domContent = '';
  
  if (data == "") {
    domContent = 'No Data Found';
  } else {
    var html = [];
    var rData = JSON.parse(data);

    if (rData.length > 0) {
      var firstItem = rData[0];
      var columns = Object.keys(firstItem).filter(title => title != 'APP_MST_ID');

      html.push('<div class="table-responsive">');
      html.push('<table class="table table-blue">');
      html.push(rowFactory.heading(columns));
      html.push('<tbody>');

      for (var item of rData) {
        html.push('<tr>');
        for (var columnName of columns) {
          html.push(
            rowFactory.addCell(columnName, item, ddlSelectedVal)
          );
        }
        html.push('</tr>');
      }

      html.push('</tbody></table></div>');

      domContent = html.join('');
    }
  }
  
  $("#dvTable").html(domContent);
});
    ＆＃13; 
    table {
  border-collapse: collapse;
  text-align: left;
}

tr {
  border-bottom: 1px solid #ddd;
}

tbody tr:nth-child(odd) {
  background-color: #eee; 
}

th, td {
  padding: 0 4px;
  width: 100%;
}
    ＆＃13; 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvTable">
</div>
    ＆＃13;
    ＆＃13;
    ＆＃13;

相关问题
最新问题