jsgrid多个自定义控件按钮？

jsgrid多个自定义控件按钮？| Id | Title | DateAdded | SourceUrl | PostType | Body | BlogId | Description | DateUpdated | IsMarkdown | EntryName | CreatedTime | IsActive | AutoDesc | AccessPermission |

| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------| -------------|
| 17982528| jsgrid多个自定义控件按钮？| 2024-01-23T15:05:00| | BlogPost|

我想添加多个自定义控件按钮，这样我就可以向这些按钮添加一个自定义单击事件。我遇到的问题是删除按钮只显示出来。我希望编辑和删除按钮都显示在每一行。我有以下代码：

<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);
                </span><span style="color: #0000ff;">var</span> $customButton = $("&lt;button&gt;").attr({class: "customGridDeletebutton jsgrid-button jsgrid-edit-button"<span style="color: #000000;">})
                  .click(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
                    alert(</span>"ID: " +<span style="color: #000000;"> item.id);
                    e.stopPropagation();
                  });

                </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> $result.add($customButton);
            },
            itemTemplate: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(value, item) {
              </span><span style="color: #0000ff;">var</span> $result = jsGrid.fields.control.prototype.itemTemplate.apply(<span style="color: #0000ff;">this</span><span style="color: #000000;">, arguments);

              </span><span style="color: #0000ff;">var</span> $customButton = $("&lt;button&gt;").attr({class: "customGridEditbutton jsgrid-button jsgrid-delete-button"<span style="color: #000000;">})
                .click(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
                  alert(</span>"Title: " +<span style="color: #000000;"> item.title);
                  e.stopPropagation();
                });

                </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> $result.add($customButton);
            }
          }
       ]
   });
});

</script>

<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);
                </span><span style="color: #0000ff;">var</span> $customEditButton = $("&lt;button&gt;").attr({class: "customGridEditbutton jsgrid-button jsgrid-edit-button"<span style="color: #000000;">})
                  .click(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
                    alert(</span>"ID: " +<span style="color: #000000;"> item.id);
                    e.stopPropagation();
                  });

               </span><span style="color: #0000ff;">var</span> $customDeleteButton = $("&lt;button&gt;").attr({class: "customGridDeletebutton jsgrid-button jsgrid-delete-button"<span style="color: #000000;">})
                .click(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
                  alert(</span>"Title: " +<span style="color: #000000;"> item.title);
                  e.stopPropagation();
                });

                </span><span style="color: #0000ff;">return</span> $("&lt;div&gt;"<span style="color: #000000;">).append($customEditButton).append($customDeleteButton);
                </span><span style="color: #008000;">//</span><span style="color: #008000;">return $result.add($customButton);</span>

                },

}

]

});

});
</script>

{
    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"});
    </span><span style="color: #0000ff;">var</span> $customEditButton = $("&lt;button&gt;"<span style="color: #000000;">)
        .attr({class: </span>"btn btn-warning btn-xs"<span style="color: #000000;">})
        .attr({role: </span>"button"<span style="color: #000000;">})
        .attr({title: jsGrid.fields.control.prototype.editButtonTooltip})
        .attr({id: </span>"btn-edit-" +<span style="color: #000000;"> item.id})
        .click(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(e) {
            alert(</span>"ID: " +<span style="color: #000000;"> item.id);
            </span><span style="color: #008000;">//</span><span style="color: #008000;"> document.location.href = item.id + "/edit";</span>

                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);
    </span><span style="color: #0000ff;">return</span> $("&lt;div&gt;").attr({class: "btn-toolbar"<span style="color: #000000;">})
        .append($customEditButton)
        .append($customDeleteButton);
}

}

jsgrid多个自定义控件按钮？-腾讯云开发者社区-腾讯云 (tencent.com)

| 648658| | 2024-01-23T15:06:00| false| | 2024-01-23T15:05:18.277| true| 我想添加多个自定义控件按钮，这样我就可以向这些按钮添加一个自定义单击事件。我遇到的问题是删除按钮只显示出来。我希望编辑和删除按钮都显示在每一行。我有以下代码： <script> $( document ).ready(function() { $("#jsGrid").jsGrid({ height| Anonymous|