如何使用自定义复选框隐藏网格列？

时间：2016-09-29 07:28:22

标签： javascript kendo-ui kendo-grid kendo-datasource kendo-mvvm

我想使用复选框列表隐藏网格列。在代码片段中有一个组合框，允许用户选择复选框列表的类型。 

Sample:-
[X]Agent Running Mode
[ ]Agent Version
[X]Master/Slave Mode

用户选中后，用户需要按刷新按钮重新加载网格。然后，网格应该仅隐藏代理版本，因为未选中。 

var data;
var gridColumns;
var grid;
var showlist;
var viewModel;
var list = [];
var settings = [];
var probesetting = [];
viewModel = kendo.observable({
  showlist: false,

});

kendo.bind($(checklist), viewModel);

function loadpps(settings) {
  if (undefined !== settings && settings.length) {
    settings = settings.filter(function(item, index, inputArray) {
      return inputArray.indexOf(item) == index;
    });
    for (var i = 0; i < settings.length; i++) {
      $("input[name='checkedFiles[" + settings[i] + "]']").prop("checked", true);
    }
    console.log(settings);
  } else {
    settings = [];
  }

}

function removeA(settings) {
  var what, a = arguments,
    L = a.length,
    ax;
  while (L > 1 && settings.length) {
    what = a[--L];
    while ((ax = settings.indexOf(what)) !== -1) {
      settings.splice(ax, 1);
    }
  }
  return settings;
}

function onChange() {
    viewModel = kendo.observable({
      showlist: true,
    });
    filterinfo(cType.value());
    loadpps(settings);
    kendo.bind($(checklist), viewModel);
  }
  //change view

function filterinfo(value) {
  var treeView = $("#treeview").data("kendoTreeView");
  if (treeView) {
    treeView.destroy();
    $("#treeview").html("");
  }

  function onCheck() {
    var checkedNodes = [];
    checkedNodeIds(treeView.dataSource.view(), checkedNodes);
  }

  switch (value) {
    case "1":
      treeView = $("#treeview").kendoTreeView({
        checkboxes: {
          checkChildren: false,
          template: "# if(!item.hasChildren){# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> <input type='checkbox'  name='checkedFiles[#= item.id #]' value='true' />#}else{# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> #}#"
        },
        check: onCheck,
        dataSource: PrimaryProbe,
        dataTextField: "value"
      }).data("kendoTreeView");

      function checkedNodeIds(nodes, checkedNodes) {
        for (var i = 0; i < nodes.length; i++) {
          if (nodes[i].checked) {
            settings.push(nodes[i].id);
          } else {
            removeA(settings, nodes[i].id);
          }
          if (nodes[i].hasChildren) {
            checkedNodeIds(nodes[i].children.view(), checkedNodes);
          }
        }
      }
      break;
  }
}


var clientType = [{
  "clientTypeID": 1,
  "clientTypeName": "PrimaryProbe"
}, ]


var cType = $("#clientType").kendoComboBox({
  filter: "contains",
  change: onChange,
  placeholder: "Filter by client type",
  dataTextField: "clientTypeName",
  dataValueField: "clientTypeID",
  dataSource: {
    data: clientType
  }
}).data("kendoComboBox");

var PrimaryProbe = new kendo.data.HierarchicalDataSource({
  data: [{
    id: 5,
    parent_id: 0,
    value: "General - Primary Probe",
    expanded: true,
    items: [{
      id: 51,
      parent_id: 5,
      value: "Agent Running Mode"
    }, {
      id: 52,
      parent_id: 5,
      value: "Agent Version"
    }, {
      id: 53,
      parent_id: 5,
      value: "Master/Slave Mode"
    }]
  }]
});


var defaultData = [{
  clientName: "Jupiter-RTU-0B40",
  clientTypeID: 1,
  clientType: "PrimaryProbe",
  SystemTypeID: 5,
  SystemTypeName: "TEMS Automatic",
  lastUpdate: "28d",
  location: "3.08191833333333,101.58238",
  status: "InProcess",
  runningMode: "test1",
  agentVersion: "test2",
  Mode: "test3"
}, {
  clientName: "MPC00200C6C2ACE",
  clientTypeID: 1,
  clientType: "PrimaryProbe",
  SystemTypeID: 5,
  SystemTypeName: "TEMS Automatic",
  lastUpdate: "82d",
  location: "63.7443,19.9584",
  status: "InProcess",
  runningMode: "test4",
  agentVersion: "test5",
  Mode: "test6"
}, {
  clientName: "RTU0010F33FDBD8",
  clientTypeID: 1,
  clientType: "PrimaryProbe",
  SystemTypeID: 5,
  SystemTypeName: "TEMS Automatic",
  lastUpdate: "0d",
  location: "3.08191833333333,101.58238",
  status: "InProcess",
  runningMode: "test7",
  agentVersion: "test8",
  Mode: "test9"
}];
var defaultColumns = [{
  title: "Default",
  columns: [{
    field: "clientName",
    title: "Client Name",
    locked: true,
    width: 150
  }, {
    field: "clientType",
    title: "Client Type",
    width: 150
  }, {
    field: "lastUpdate",
    title: "Last Update",
    width: 150
  }, {
    field: "location",
    title: "Location",
    width: 150
  }, {
    field: "status",
    title: "Status",
    width: 150
  }, {
    field: "runningMode",
    title: "Agent Running Mode",
    width: 150
  }, {
    field: "agentVersion",
    title: "Agent Version",
    width: 150
  }, {
    field: "Mode",
    title: "Master/Slave Mode",
    width: 150
  }]
}]



grid = $("#grid").kendoGrid({
  columns: defaultColumns,

  dataSource: {
    data: defaultData

  },

  selectable: "multiple",
  scrollable: true,
  pageable: false,
  columnMenu: true,
  sortable: true
});

$("#reset").on("click", function() {

  //refresh grid

});
#fieldlist {
  margin: 0;
  padding: 0;
}
#fieldlist li {
  list-style: none;
  padding-bottom: 1.5em;
  text-align: left;
}
#fieldlist label {
  display: block;
  padding-bottom: .3em;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
}
.searchClientText {
  width: 222px !important;
  height: 25px !important;
  border-radius: 3px;
}
.checkboxList {
  margin: 0 0 -1em;
  padding: 0;
}
.checkboxList li {
  list-style: none;
  padding-bottom: 1em;
}
td {
  width: 150px;
  vertical-align: top;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>

  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <div class="demo-section k-content">

    <ul id="fieldlist">
      <li>
        <input id="clientType" style="width:auto" />
      </li>
    </ul>

  </div>
  </div>


  <div id="checklist" data-bind="visible: showlist">
    <table>
      <tr>
        <td>
          <div id="treeview"></div>
          <div id="result"></div>
        </td>
      </tr>
    </table>
  </div>

  <div id="grid"></div>
  <button class="k-button k-primary" id="refresh">Refresh</button>


</body>

</html>

1 个答案:

答案 0 :(得分：0)

我添加了一些功能，它会检查复选框并实现hideColumn。

var data;
var gridColumns;
var grid;
var showlist;
var viewModel;
var list = [];
var settings=[];
var hideCol=[];
var showCol=[];
var probesetting = [];



function loadpps(settings) {
  if (undefined !== settings && settings.length) {
    settings = settings.filter(function(item, index, inputArray) {
      return inputArray.indexOf(item) == index;
    });
    for (var i = 0; i < settings.length; i++) {
      $("input[name='checkedFiles[" + settings[i] + "]']").prop("checked", true);
    showCol.push(setting[i]);
    }
  } else {
    settings = [];
  }

}

function loadcol(hideCol) {
  if (undefined !== hideCol  && hideCol.length) {
    hideCol = hideCol.filter(function(item, index, inputArray) {
      return inputArray.indexOf(item) == index;
    });
      for (var i = 0; i < hideCol.length; i++) {
        var grid = $("#grid").data("kendoGrid");
        grid.hideColumn(hideCol[i]);
      }
    } else {
      hideCol = [];
    }

  }

function loadshow(showCol) {
  if (undefined !== showCol  && showCol.length) {
    showCol = showCol.filter(function(item, index, inputArray) {
      return inputArray.indexOf(item) == index;
    });
      for (var i = 0; i < showCol.length; i++) {
        var grid = $("#grid").data("kendoGrid");
        grid.showColumn(showCol[i]);
      }
  }
}
function removearray(showCol)
{
  while(showCol.length > 0) {
      showCol.pop();
    }
}

function removeA(settings) {
  var what, a = arguments,
    L = a.length,
    ax;
  while (L > 1 && settings.length) {
    what = a[--L];
    while ((ax = settings.indexOf(what)) !== -1) {
      settings.splice(ax, 1);
    }
  }
  return settings;
}


function onChange() {
    viewModel = kendo.observable({
      showlist: true,
    });
    filterinfo(cType.value());
    loadpps(settings);
    loadcol(hideCol);
    
    kendo.bind($(checklist), viewModel);
  }
  //change view

function filterinfo(value) {
  var treeView = $("#treeview").data("kendoTreeView");
  if (treeView) {
    treeView.destroy();
    $("#treeview").html("");
  }

  function onCheck() {
    var checkedNodes = [];
    checkedNodeIds(treeView.dataSource.view(), checkedNodes);
    loadpps(settings);
    loadcol(hideCol);
    loadshow(showCol);
    removearray(showCol);
  }

  switch (value) {
    case "1":
      setting=[];
      treeView = $("#treeview").kendoTreeView({
        checkboxes: {
          checkChildren: false,
          template: "# if(!item.hasChildren){# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> <input type='checkbox'  name='checkedFiles[#= item.value #]' value='true' />#}else{# <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#'/> #}#"
        },
        check: onCheck,
        dataSource: PrimaryProbe,
         dataTextField: "text",
        dataValueField: "value",
        
      }).data("kendoTreeView");

      function checkedNodeIds(nodes, checkedNodes) {
        for (var i = 0; i < nodes.length; i++) {
          if (nodes[i].checked) {
            settings.push(nodes[i].value);
            hideCol.push(nodes[i].value);
            
          } else {
            showCol.push(nodes[i].value);
            removeA(settings, nodes[i].value);
          }
          if (nodes[i].hasChildren) {
            checkedNodeIds(nodes[i].children.view(), checkedNodes);
          }
        }
      }
      break;
  }
}


var clientType = [{
  "clientTypeID": 1,
  "clientTypeName": "PrimaryProbe"
}, ]


var cType = $("#clientType").kendoComboBox({
  filter: "contains",
  change: onChange,
  placeholder: "Filter by client type",
  dataTextField: "clientTypeName",
  dataValueField: "clientTypeID",
  dataSource: {
    data: clientType
  }
}).data("kendoComboBox");

var PrimaryProbe = new kendo.data.HierarchicalDataSource({
  data: [{
    id: 5,
    parent_id: 0,
    text:"General - Primary Probe",
    value: "General - Primary Probe",
    expanded: true,
    items: [{
      id: 51,
      parent_id: 5,
      text:"Agent Running Mode",
      value: "runningMode"
    }, {
      id: 52,
      parent_id: 5,
      text:"Agent Version",
      value: "agentVersion"
    }, {
      id: 53,
      parent_id: 5,
      text:"Master/Slave Mode",
      value: "Mode"
    }]
  }]
});


var defaultData = [{
  clientName: "Jupiter-RTU-0B40",
  clientTypeID: 1,
  clientType: "PrimaryProbe",
  SystemTypeID: 5,
  SystemTypeName: "TEMS Automatic",
  lastUpdate: "28d",
  location: "3.08191833333333,101.58238",
  status: "InProcess",
  runningMode: "test1",
  agentVersion: "test2",
  Mode: "test3"
}, {
  clientName: "MPC00200C6C2ACE",
  clientTypeID: 1,
  clientType: "PrimaryProbe",
  SystemTypeID: 5,
  SystemTypeName: "TEMS Automatic",
  lastUpdate: "82d",
  location: "63.7443,19.9584",
  status: "InProcess",
  runningMode: "test4",
  agentVersion: "test5",
  Mode: "test6"
}, {
  clientName: "RTU0010F33FDBD8",
  clientTypeID: 1,
  clientType: "PrimaryProbe",
  SystemTypeID: 5,
  SystemTypeName: "TEMS Automatic",
  lastUpdate: "0d",
  location: "3.08191833333333,101.58238",
  status: "InProcess",
  runningMode: "test7",
  agentVersion: "test8",
  Mode: "test9"
}];
var defaultColumns = [{
  title: "Default",
  columns: [{
    field: "clientName",
    title: "Client Name",
    locked: true,
    width: 150
  }, {
    field: "clientType",
    title: "Client Type",
    width: 150
  }, {
    field: "lastUpdate",
    title: "Last Update",
    width: 150
  }, {
    field: "location",
    title: "Location",
    width: 150
  }, {
    field: "status",
    title: "Status",
    width: 150
  }, {
    field: "runningMode",
    title: "Agent Running Mode",
    width: 150
  }, {
    field: "agentVersion",
    title: "Agent Version",
    width: 150
  }, {
    field: "Mode",
    title: "Master/Slave Mode",
    width: 150
  }]
}]



grid = $("#grid").kendoGrid({
  columns: defaultColumns,

  dataSource: {
    data: defaultData

  },

  selectable: "multiple",
  scrollable: true,
  pageable: false,
  columnMenu: true,
  sortable: true
});

相关问题
最新问题