将属性添加到复选框后退网格
Add attribute to checkbox Backgrid
大家好,我正在使用后网格来渲染我的表格,碰巧也有一些复选框。现在我想向这些复选框添加 2 个属性,但我不知道该怎么做。有人可以告诉我如何完成它。谢谢
.HTML
<div id="dayResult" class="backgrid-container" style="width: 139PX; height: initial; "></div>
.JS
var grid1 = new Backgrid.Grid({
columns: [ {
name: "name",
label: "",
cell: "string"
},{
// name is a required parameter, but you don't really want one on a select all column
name: " ",
// Backgrid.Extension.SelectRowCell lets you select individual rows
cell: "select-row",
// Backgrid.Extension.SelectAllHeaderCell lets you select all the row on a page
// headerCell: "select-all",
}],
collection: new Backbone.Collection([
{"name": "Monday"},
{"name": "Tuesday"},
{"name": "Wednesday"},
{"name": "Thursday"},
{"name": "Friday"},
{"name": "Saturday"},
{"name": "Sunday"}
])
});
$("#dayResult").append(grid1.render().el);
为此包含的文件
.CSS
<link href="../assets/css/backgrid.css" rel="stylesheet" />
<link href="../assets/plugins/backgrid-selectall/css/backgrid-select-all.css" rel="stylesheet" />
<link href="../assets/plugins/switchery/switchery.min.css" rel="stylesheet" />
.JS
<script src="https://cdn.rawgit.com/jashkenas/underscore/1.5.2/underscore.js"></script>
<script src="https://cdn.rawgit.com/jashkenas/backbone/1.1.0/backbone.js"></script>
<script src="https://cdn.rawgit.com/wyuenho/backbone-pageable/master/lib/backbone-pageable.js"></script>
<script src="https://cdn.rawgit.com/wyuenho/backgrid/master/lib/backgrid.js"></script>
<script src="./assets/plugins/backgrid-selectall/js/backgrid-select-all.js" ></script>
<script src="./assets/plugins/switchery/switchery.js"></script>
CDN 网址的
Switchery
https://cdn.rawgit.com/abpetkov/switchery/master/switchery.css
https://cdn.rawgit.com/abpetkov/switchery/master/switchery.js
Backgrid
https://cdn.rawgit.com/wyuenho/backgrid/master/lib/backgrid.css
https://cdn.rawgit.com/wyuenho/backgrid-select-all/master/backgrid-select-all.css
https://cdn.rawgit.com/wyuenho/backgrid/master/lib/backgrid.js
https://cdn.rawgit.com/wyuenho/backgrid-select-all/master/backgrid-select-all.js
您需要
扩展复选框列单元格的render()
方法。
我做了类似的事情来向我的复选框图像添加属性。我不使用"选择行"方法,但我相信您可以像这样扩展它:
cell: Backgrid.Cell.extend({
className: '4YearDegree',
render: function() {
var degree = this.model.get("Degree");
var src = '';
var altText = '';
if (degree) {
src = '../Content/Images/enabled_checkmark.png'; //display enabled checkmark image
altText = 'is checked';
} else {
src = '../Content/Images/disabled_checkmark.png'; //display disabled checkmark image
altText = 'is unchecked';
}
this.$el.html($('<img>').attr('src', src).attr('alt', altText));
return this;
}
})
上面代码的关键部分是这一行:
this.$el.html($('<img>').attr('src', src).attr('alt', altText));
我用它来将"altText"附加到我的复选标记图像中。
尝试以这种方式添加您自己的自定义属性。它可以/应该工作。
相关文章:
- 在GridView中,当单击复选框时,在网格的同一行中使用JavaScript将标签中的值添加到TextBox
- ui网格如何在单击行时选中复选框
- Kendo UI网格复选框列字段未定义
- Rad网格编辑模式通过选中复选框时的java脚本启用禁用所需的字段验证器
- 检查网格视图中的复选框是否被选中
- jqGrid-当我点击网格中的另一个复选框时,选中多选复选框
- 如何选中/取消选中外部按钮的网格视图复选框
- 在客户端的编辑模式下,在同一单元格网格视图中选中复选框时禁用文本框
- 如何在剑道网格中选中复选框
- 如何使用javascript在选中网格视图复选框时创建表行
- 在数据网格中的复选框单击时使用 Databinder.Eval
- 禁用带有复选框的网格面板
- 如何从网格视图中隐藏复选框
- 我想隐藏树网格(带列的树面板)中非叶节点上的复选框
- 将属性添加到复选框后退网格
- 如何重新启用剑道网格复选框
- 如何无法剑道网格复选框
- 如何基于树视图节点填充网格(复选框选择)
- 如何在ExtJs4中动态设置网格复选框选择模型
- 带有布尔值的剑道网格复选框不起作用