jsgrid多个自定义控制按钮？

Question

我想添加多个自定义控制按钮，以便可以向按钮添加自定义点击事件。我遇到的问题是仅显示删除按钮。我希望每一行都显示编辑和删除按钮。我有以下代码：

<script>
    $( document ).ready(function() {
      $("#jsGrid").jsGrid({
           height: "auto",
           width: "100%",
           sorting: true,
           paging: true,
           autoload: true,
           pageSize: 10,
           pageButtonCount: 5,
           deleteConfirm: "Do you really want to delete your job listing?",
           controller: {
               loadData: function(filter) {
                   return $.ajax({
                       type: "GET",
                       url: "<?php echo site_url('/job/getjobs/'.$this->session->employer_id); ?>",
                       data: filter
                   });
               },
           },
           fields: [
               { name: "id", title: "id", type: "text", visible: false, width: 100 },
               { name: "title", title: "Title", type: "text", width: 100 },
               { name: "created_on", title: "Created On", type: "text", width: 100 },
               { name: "salary", title: "Salary", type: "text", width: 100 },
               { name: "is_active", type: "text", title: "Is Active", width: 100 },
               { type: "control", width: 100, editButton: false, deleteButton: false,
                 itemTemplate: function(value, item) {
                    var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);

                    var $customButton = $("<button>").attr({class: "customGridDeletebutton jsgrid-button jsgrid-edit-button"})
                      .click(function(e) {
                        alert("ID: " + item.id);
                        e.stopPropagation();
                      });

                    return $result.add($customButton);
                },
                itemTemplate: function(value, item) {
                  var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);

                  var $customButton = $("<button>").attr({class: "customGridEditbutton jsgrid-button jsgrid-delete-button"})
                    .click(function(e) {
                      alert("Title: " + item.title);
                      e.stopPropagation();
                    });

                    return $result.add($customButton);
                }
              }
           ]
       });
    });

</script>

Answer 1

我能够解决这个问题：

代码：

<script>
    $( document ).ready(function() {
      $("#jsGrid").jsGrid({
           height: "auto",
           width: "100%",
           sorting: true,
           paging: true,
           autoload: true,
           pageSize: 10,
           pageButtonCount: 5,
           deleteConfirm: "Do you really want to delete your job listing?",
           controller: {
               loadData: function(filter) {
                   return $.ajax({
                       type: "GET",
                       url: "<?php echo site_url('/job/getjobs/'.$this->session->employer_id); ?>",
                       data: filter
                   });
               },
           },
           fields: [
               { name: "id", title: "id", type: "text", visible: false, width: 100 },
               { name: "title", title: "Title", type: "text", width: 100 },
               { name: "created_on", title: "Created On", type: "text", width: 100 },
               { name: "salary", title: "Salary", type: "text", width: 100 },
               { name: "is_active", type: "text", title: "Is Active", width: 100 },
               { type: "control", width: 100, editButton: false, deleteButton: false,
                 itemTemplate: function(value, item) {
                    var $result = jsGrid.fields.control.prototype.itemTemplate.apply(this, arguments);

                    var $customEditButton = $("<button>").attr({class: "customGridEditbutton jsgrid-button jsgrid-edit-button"})
                      .click(function(e) {
                        alert("ID: " + item.id);
                        e.stopPropagation();
                      });

                   var $customDeleteButton = $("<button>").attr({class: "customGridDeletebutton jsgrid-button jsgrid-delete-button"})
                    .click(function(e) {
                      alert("Title: " + item.title);
                      e.stopPropagation();
                    });

                    return $("<div>").append($customEditButton).append($customDeleteButton);
                    //return $result.add($customButton);
                },
              }
           ]
       });
    });

</script>

Answer 2

Bootstrap jsGrid 的样式按钮

将此添加到fields 数组：

{
    type: "control", editButton: false, deleteButton: false,
    itemTemplate: function(value, item) {
        var $iconPencil = $("<i>").attr({class: "glyphicon glyphicon-pencil"});
        var $iconTrash = $("<i>").attr({class: "glyphicon glyphicon-trash"});

        var $customEditButton = $("<button>")
            .attr({class: "btn btn-warning btn-xs"})
            .attr({role: "button"})
            .attr({title: jsGrid.fields.control.prototype.editButtonTooltip})
            .attr({id: "btn-edit-" + item.id})
            .click(function(e) {
                alert("ID: " + item.id);
                // document.location.href = item.id + "/edit";
                e.stopPropagation();
            })
            .append($iconPencil);
        var $customDeleteButton = $("<button>")
            .attr({class: "btn btn-danger btn-xs"})
            .attr({role: "button"})
            .attr({title: jsGrid.fields.control.prototype.deleteButtonTooltip})
            .attr({id: "btn-delete-" + item.id})
            .click(function(e) {
                alert("ID: " + item.id);
                // document.location.href = item.id + "/delete";
                e.stopPropagation();
            })
            .append($iconTrash);

        return $("<div>").attr({class: "btn-toolbar"})
            .append($customEditButton)
            .append($customDeleteButton);
    }
}

结果：