问题
I would like to add multiple custom control buttons so I can add a custom click event to the buttons. The issue I am having is the delete button is only shown. I would like both the edit and delete buttons shown in every row. I have the following code:
<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>
回答1:
I was able to figure this out:
Code:
<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>
回答2:
Bootstrap styled buttons for jsGrid
Add this to fields
array:
{
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);
}
}
Result:
来源:https://stackoverflow.com/questions/43970122/jsgrid-multiple-custom-control-buttons