DataGrid

最新推荐文章于 2025-04-12 21:09:39 发布

weixin_34395205

最新推荐文章于 2025-04-12 21:09:39 发布

阅读量93

点赞数

设置复选框

//字段中添加ck项 
columns: [
    [
       { field: 'ck', checkbox: true },
       { field: 'Id', title: '主键', sortable: true, width: 150, hidden: true },
       { field: 'MaterialNumber', title: '物料编码', sortable: true, width: 110 },
       { field: 'MaterialName', title: '物料名称', sortable: true, width: 280 }
   ]
 ]

 //通过getChecked获取
      var rows = $("#akmaterial_dg").datagrid("getChecked");
        if (rows.length < 1) {
            $.show_warning("提示", "请先勾选要修改的记录");
            return;
        }
        if (rows.length > 1) {
            $.show_warning("提示", "不支持批量修改");
            return;
        }

获取选择行的内容

onDblClickCell: function () {
    var rows = $(this).datagrid('getSelections');
    if (rows.length == 1) {
          console.log(rows[0].Batch);
    }
}

通过rowIndex获取行内容

在表格行的事件中，有rowIndex项。通过保存这个rowIndex，可以随时对这个行进行操作。

onClickCell: function (rowIndex, field, value) {
      //上次的编辑没有通过，本次编辑取消
        if (!vaildateDataGridCell(beforeEditIndex)) {
           return;
        }
      //执行这次编辑
      $('#orderDetail').datagrid('beginEdit', rowIndex);
       beforeEditIndex = rowIndex;
 }

var node = $("#orderDetail").datagrid('getRows')[editIndex];
var beforeValue = node.Qty;

获取表格属性

比如在某个请求中希望获取当前的排序字段和排序状态，可以通过下面的方法获取

var queryParams = $("#akmaterial_dg").datagrid("options");

console.log(queryParams);
console.log(queryParams.sortName);//排序字段
console.log(queryParams.sortOrder);//排序状态

让某一行选中

onLoadSuccess: function () {
    var rows = $("#akmaterialbom_main_dg").datagrid('getRows');
    if (rows.length > 1) {
      $("#akmaterialbom_main_dg").datagrid('selectRow',0);
    }
}

根据某行的字段为当前行添加背景色

rowStyler: function (index, row) {
   if (row.CheckStatus == "否") {
       return 'background-color:#6293BB;color:#fff;font-weight:bold;';
   }
}

行高自适应

autoRowHeight:true

{ field: 'PicturePath', title: '照片', width: 280, align: 'center', formatter: function (value) { return '<div style="height:55px;" onclick="funcPreview(\'' + escape(value) + '\');"><span>' + value + '</span></div>'; } }

格式化列字段

{
    field: 'PicturePath', title: '照片', width: 150, align: 'center',
    formatter: function(value, row, index) {
            return '<div style="height:80px;" onclick="funcPreview(\''
            + escape(row.Code)
            + '\');"><img src="/Accessory/GitImage/'
            + row.Code
            + '" alt="" width="100%" height="100%"/></div>';
     }
 },
{ field: 'Code', title: '物料号', sortable: true, width: 100 },