如何覆盖编辑行并在jsgrid中调用自定义编辑

Question

如下所示尝试了How to customize edit event in JsGrid。但是好像不行

$("#jsgrd").jsGrid({
  data: ds,
  fields: [{
    type: "control",
    editItem: editrow(item)
  }, ]
});

function editrow(item) {
  var $row = this.rowByItem(item);
  if ($row.length) {
    console.log('$row: ' + JSON.stringify($row)); // I modify this
    this._editRow($row);
  }
}

我现在得到的错误是“项目”未定义。

我正在寻找的是，当用户单击编辑时，我想将rowid 存储在隐藏的列中，并使用它从服务器获取更多数据并填充到 jsgrid 之外。并避免将行更改为编辑模式

Answer 1

您没有使用记录在案的方式。你应该使用editTemplate。

一个简单的工作示例是：

 $(document).ready(function() {
 $("#grid").jsGrid({
    width: "100%",
    editing: true,
    autoload: true,
    data: [ { id:1, name:"Tom"}, {id:2, name:"Dick"}],
    fields: [
             { name: "id", type: "text", title: "Id"},
             { name: "name", type: "text", title: "Name", 
                 editTemplate: function(item) {
                   return "<input type='checkbox'>" + item;
             }},
             { type: "control"}
           ]
     });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<div id="grid">
Test
</div>

为了便于说明，我将名称字段的编辑从标准文本框变成了复选框。

Answer 2

您可以使用itemTemplate 来获得所需的结果。

• itemTemplate 是一个创建单元格内容的函数。它应该以字符串、DomNode 或 jQueryElement 的形式返回标记。函数签名为function(value, item)，其中value为数据项的列属性value，item为行数据item。

在itemTemplate 内部，您可以根据自己的要求自定义 dom 元素。

运行演示

$("#jsGrid").jsGrid({
    width: "100%",
    height: "auto",
    paging: false,

    //for loadData method Need to set auto load true
    autoload: true,

    noDataContent: "Directory is empty",

    controller: {
        loadData: function(filter) {
            var data = [{
                id: 1,
                nickname: "Test",
                email: "t@gmail.com"
            }, {
                id: 2,
                nickname: "Test 1",
                email: "t1@gmail.com"
            }, {
                id: 3,
                nickname: "Test 2",
                email: "t2@gmail.com"
            }, {
                id: 4,
                nickname: "Test 3",
                email: "t3@gmail.com"
            }];
            return data;
        }
    },

    fields: [{
        name: "nickname",
        type: "text",
        width: 80,
        title: "Name"
    }, {
        name: "email",
        type: "text",
        width: 100,
        title: "Email Address",
        readOnly: false
    }, {
        type: "control",

        itemTemplate: function(value, item) {
            var editDeleteBtn = $('<input class="jsgrid-button jsgrid-edit-button" type="button" title="Edit"><input class="jsgrid-button jsgrid-delete-button" type="button" title="Delete">')
                .on('click', function (e) {
                    console.clear();
                    if (e.target.title == 'Edit') {
                        //Based on button click you can make your customization  
                        console.log(item); //You can access all data based on item clicked
                        e.stopPropagation();
                    } else {
                        //Based on button click you can make your customization
                        console.log('Delete')
                    }
                });

            return editDeleteBtn; //
        },
    }]
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<div id="jsGrid"></div>