Question

我正在尝试使用backgrid分页的示例。我必须在单击编辑按钮时编辑单元格内容，然后将更新的单元格内容保存到服务器。在这里，我使用backgrid单元格扩展渲染按钮，但无法弄清楚如何在单击按钮时启用单元格进行编辑。

这是我尝试的样本..在EditCell中我有一个方法editRow，我必须在其中执行更新。

由于

$('.add_input').eq(0).click(function() {
            form_a++;
            var formhtml = $('#divform_a .form').eq(0).html().toString();
            formhtml = formhtml.replace(/form_a/g, 'form_item'+form_a);
            $('#divform_a').eq(0).append('<div class="form">' + formhtml + '</div>');
                    focus_map_location = jQuery('#divform_a .form:last .map_location');

            $("#divform_a .form:last .address").removeAttr('id');
            address_form = $("#address").parent();
            $("#address").clone(true).prependTo(address_form).removeAttr('id');
            address_name = $("#divform_a .form:last .address").attr('name');
            $("#divform_a .form:last .address").remove();
            $("#address").prependTo($("#divform_a .form:last")).attr('name',address_name).val('');
        });

Answer 1

以下代码解决了我的问题。使用下面的代码，我们可以根据条件使每个单元格可编辑/不可编辑。仍在寻找更好的方法来启用编辑按钮单击。

(function(){
//Person Model
var Person = Backbone.Model.extend({
});

//Person collection - People
var People = Backbone.Collection.extend({
model: Person
});


var personCollection = new People([
{
id: 1,
name: 'Trim',
age: 33,
occupation: 'Dotnet Programmer'
},
{
id: 2,
name: 'Crum',
age: 25,
occupation: 'Developer'
},
{
id: 3,
name: 'Drum',
age: 46,
occupation: 'Designer'
},
{
id: 4,
name: 'Srum',
age: 27,
occupation: 'Java Programmer'
},
{
id: 5,
name: 'Vrum',
age: 24,
occupation: 'Developer'
},
{
id: 6,
name: 'Brum',
age: 29,
occupation: 'Designer'
},
{
id: 7,
name: 'Frum',
age: 33,
occupation: 'Dotnet Programmer'
},
{
id: 8,
name: 'Jrum',
age: 25,
occupation: ''
},
{
id: 9,
name: 'Lrum',
age: 46,
occupation: ''
},
{
id: 10,
name: 'Hrum',
age: 27,
occupation: 'Java Programmer'
},
{
id: 11,
name: 'Prum',
age: 24,
occupation: 'Developer'
},
{
id: 12,
name: 'Zrum',
age: 29,
occupation: 'Designer'
}
]
);

var MyCell = Backgrid.Cell.extend({
initialize: function (options) {
MyCell.__super__.initialize.apply(this, arguments);
this.listenTo(this.model, "backgrid:edited", this.doSomething);
},
doSomething: function () {
console.log('something');
},
enterEditMode: function () {
this.$el.width((this.$el.outerWidth() - 10) + 'px');
Backgrid.Cell.prototype.enterEditMode.apply(this, arguments);
},
exitEditMode: function () {
this.$el.width(false);
Backgrid.Cell.prototype.exitEditMode.apply(this, arguments);
}
});

var columns = [{
name: "id", // The key of the model attribute
label: "ID", // The name to display in the header
editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
// Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
cell: "string", //Backgrid.IntegerCell.extend({ tagName: "td style='text-align:left'" })
editable:false,
isEnabled: false
}, {
name: "name",
label: "Name",
// The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
cell: "string", // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
editable:false
}, {
name: "age",
label: "Age",
cell: "string", // An integer cell is a number cell that displays humanized integers
editable: false
}, {
name: "occupation",
label: "Occupation",
cell: MyCell, // A cell type for floating point value, defaults to have a precision 2 decimal numbers
editable: function (c, m) {
if (typeof(c.collection) === 'undefined')
return false;
else
return (c.attributes.age <= 30) ? true : false;
}
}];

// Initialize a new Grid instance
var grid = new Backgrid.Grid({
columns: columns,
collection: personCollection
});


// Initialize a client-side filter to filter on the client
// mode pageable collection's cache.
var filter = new Backgrid.Extension.ClientSideFilter({
collection: personCollection,
fields: ['name']
});

// Render the grid and attach the root to your HTML document
$("#grid").append(grid.render().el);
$("#grid").before(filter.render().el);

})();

如何使用backgrid编辑单元格

1 个答案: