1

我正在使用 JSGrid Jquery 插件，我需要使用来自 jquery ui 的 checkboxradio，所以我创建了一个自定义字段，它可以工作，但我有一个小问题：当编辑这个单元格时，即使没有按下完成编辑按钮，值也会被保存。在正常情况下，如果您离开该行而不按完成编辑“右标记”，则不会发生保存。

这是我的代码：

$(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"}
    ]
});
4

0 回答 0