基于YearEligible列值控制jqxGrid控制台输出与Year列显示

实现方案 #

功能1：Year Eligible值为N的记录Year列显示N/A #

在Year列的配置项中新增cellsrenderer自定义渲染逻辑，同时新增editable回调禁止该类记录的Year列编辑，避免用户修改N/A状态：

{
  text: 'Year',
  width: 120,
  datafield: 'yearValue',
  columntype: 'dropdownlist',
  // 仅Year Eligible为Y的行允许编辑Year列
  editable: function(row) {
    return $("#jqxgrid").jqxGrid('getrowdata', row).yeareligible === 'Y';
  },
  createeditor: function (row, column, editor) {
    var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
    editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
  },
  // 自定义单元格渲染
  cellsrenderer : (row, columnfield, value, defaulthtml, columnproperties) => {
    return $("#jqxgrid").jqxGrid('getrowdata', row).yeareligible === 'N' ? '<span style="padding: 0 8px;">N/A</span>' : defaulthtml
  }
}

功能2：选中记录输出时Year Eligible为N的默认返回yearValue=-1 #

你原代码中map处理后的数组未赋值给变量，导致打印的还是未处理的原数据，修正点击事件逻辑即可：

$('#jqxbutton').click(function () {
  var rows = $('#jqxgrid').jqxGrid('getrows');
  // 过滤选中记录并统一处理yearValue字段
  var selectedRows = rows.filter(x => x.available).map(row => {
    if (row.yeareligible === 'N') {
      // N的记录固定返回yearValue=-1
      return Object.assign({}, row, {yearValue: '-1'})
    }
    // Y的记录优先返回用户选择的值，未选择时默认2016
    return Object.assign({}, row, {yearValue: row.yearValue || '2016'})
  });
  console.log('选中记录总数：', selectedRows.length);
  console.log(selectedRows);
});

完整可运行代码 #

JS代码 #

var data = new Array();
var firstNames = [
    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];
var lastNames = [
    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];
var yearEligible = [
    "Y", "N", "Y", "Y", "Y", "Y", "N", "N", "N", "N", "Y", "N", "N", "N", "Y", "N", "Y", "N"];
var productNames = [
    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
var priceValues = [
    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
for (var i = 0; i < 10; i++) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var price = parseFloat(priceValues[productindex]);
    var quantity = 1 + Math.round(Math.random() * 10);
    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row["yeareligible"]= yearEligible[Math.floor(Math.random() * lastNames.length)];
    row["productname"] = productNames[productindex];
    row["available"] = !!(i % 2);
    row["price"] = price;
    row["quantity"] = quantity;
    row["total"] = price * quantity;
    data[i] = row;
}
var source = {
    localdata: data,
    datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (data) {},
    loadError: function (xhr, status, error) {}
});
$("#jqxgrid").jqxGrid({
    theme: 'energyblue',
    width: 700,
    autoheight: true,
    editable: true,
    source: dataAdapter,
    columns: [{
        text: 'Available',
        datafield: 'available',
        width: 100,
        columntype: 'checkbox'
    }, {
        text: 'First Name',
        datafield: 'firstname',
        width: 100
    }, {
        text: 'Last Name',
        datafield: 'lastname',
        width: 100
    }, {
        text: 'Year Eligible',
        datafield: 'yeareligible',
        width: 100
    },
     {
        text: 'Year',
        width: 120,
        datafield:'yearValue' ,
        columntype: 'dropdownlist',
        editable: function(row) {
          return $("#jqxgrid").jqxGrid('getrowdata', row).yeareligible === 'Y';
        },
        createeditor: function (row, column, editor) {
                  var list = ['2010', '2011', '2012' ,'2013','2014','2015','2016','2017','2018','2019','2020','2021'];
                  editor.jqxDropDownList({ autoDropDownHeight: true, source: list, selectedIndex: 0 });
              },
        cellsrenderer : (row, columnfield, value, defaulthtml, columnproperties) => {
          return $("#jqxgrid").jqxGrid('getrowdata', row).yeareligible === 'N' ? '<span style="padding: 0 8px;">N/A</span>' : defaulthtml
        }
    },
    {
        text: 'Product',
        datafield: 'productname',
        width: 180
    }, {
        text: 'Quantity',
        datafield: 'quantity',
        width: 80,
        cellsalign: 'right'
    }, {
        text: 'Unit Price',
        datafield: 'price',
        width: 90,
        cellsalign: 'right',
        cellsformat: 'c2'
    }, 
    {
        text: 'Total',
        datafield: 'total',
        width: 100,
        cellsalign: 'right',
        cellsformat: 'c2'
    }]
});
$('#jqxbutton').click(function () {
  var rows = $('#jqxgrid').jqxGrid('getrows');
  var selectedRows = rows.filter(x => x.available).map(row => {
    if (row.yeareligible === 'N') {
      return Object.assign({}, row, {yearValue: '-1'})
    }
    return Object.assign({}, row, {yearValue: row.yearValue || '2016'})
  });
  console.log('选中记录总数：', selectedRows.length);
  console.log(selectedRows);
});

HTML代码 #

<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxgrid"></div>
<input type="button" style="margin: 20px;" id="jqxbutton" value="Get rows" />

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