首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jsgrid多个自定义控件按钮?

jsgrid多个自定义控件按钮?
EN

Stack Overflow用户
提问于 2017-05-15 08:38:25
回答 2查看 11.8K关注 0票数 7

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

代码语言:javascript
复制
<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>
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-05-15 21:40:00

我能够弄清楚这个问题:

代码:

代码语言:javascript
复制
<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>
票数 16
EN

Stack Overflow用户

发布于 2018-11-06 23:40:08

jsGridBootstrap样式按钮

将此代码添加到fields数组:

代码语言:javascript
复制
{
    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);
    }
}

结果:

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/43970122

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档