我使用JSGrid Jquery插件,我需要使用来自jquery ui的checkboxradio,所以我创建了一个自定义字段,它可以工作,但我有一个小问题:编辑这个单元格时,即使已完成,也会保存该值编辑按钮未按下。 在正常情况下,如果您在没有按下完成编辑的情况下离开行而不会进行保存#34;右标记"。
这是我的代码:
$(document).ready(function () {
function editlabeldatefield(obj,value){
obj._editTemplate_label=$("<label>");
obj._editTemplate_check=$('<input />', { type: 'checkbox', checked: value});
obj._editTemplate_check.appendTo(obj._editTemplate_label);
obj._editTemplate_check.checkboxradio();
//return $("<label>").append($('<input />', { type: 'checkbox', checked: value}).checkboxradio());
return obj._editTemplate_label;///=editlabeldatefield(value);
}
var MyCheckboxDateField = function(config) {
jsGrid.Field.call(this, config);
};
MyCheckboxDateField.prototype = new jsGrid.Field({
itemTemplate: function(value) {
//return $("<label>").append($('<input />', { type: 'checkbox', checked: value}).checkboxradio());
this._label=$("<label>");
this._datecheck=$('<input />', { type: 'checkbox', checked:value});
this._datecheck.appendTo(this._label);
this._datecheck.checkboxradio();
console.log($(this._datecheck).prop('checked'))
return this._label;
/// return $('<input />', { type: 'checkbox', checked: value}).checkboxradio({label : ""});
},
editTemplate: function(value) {
///return this._editdatecheck=$("<label>").append($('<input />', { type: 'checkbox', checked: value}));
return this._editTemplate_label=new editlabeldatefield(this,value);///=editlabeldatefield(value);
},
editValue: function() {
console.log($(this._editTemplate_check).prop('checked'));
return $(this._editTemplate_check).prop('checked');
},
insertTemplate: function(value) {
this._insertTemplate_label=$("<label>");
this._insertTemplate_check=$('<input />', { type: 'checkbox'});
this._insertTemplate_check.appendTo(this._insertTemplate_label);
this._insertTemplate_check.checkboxradio();
//return $("<label>").append($('<input />', { type: 'checkbox', checked: value}).checkboxradio());
//console.log(this._insertTemplate_check);
return this._insertTemplate_label;///=editlabeldatefield(value);
},
insertValue: function() {
return $(this._insertTemplate_check).prop('checked');
}
});
jsGrid.fields._checkboxDateField = MyCheckboxDateField;
var jobs = [
{
"Job Tittle": "Business Systems Analyst",
"status" : true,
"status1" : true
},
{
"Job Tittle": "Data Archtecht",
"status" : true,
"status1" : true
},
{
"Job Tittle": "DataBase Adminstrator",
"status" : false,
"status1" : false
},
{
"Job Tittle": "JAva Developer",
"status" : false ,
"status1" : false
},
];
$("#jobsTable").jsGrid({
editing: true,
inserting: true,
deleteConfirm: "Do you really want to delete the client?",
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
width: "50%",
data: jobs,
fields: [
{name: "Job Tittle", type: "text", width: 50, validate: "required"},
{title: "status", name: "status", type: "_checkboxDateField", width: 90, align: "center" },
{type: "control"}
]
});