在Knockout中使用下拉列表进行内联编辑
Inline editing using dropdownlist in Knockout
我正在尝试使用knockout实现内联编辑。我发现这个线程Knockout内联编辑绑定
并稍微调整一下,在编辑模式下有一个"选择"。我设法让它工作,除了编辑和视图模式都是可见的,这不是我想要的。有人能纠正我的错误吗?谢谢!
HTML:<div>
<button id="InputSubmitBtn" type="submit" class="btn btn-custom" data-bind="click: addParam"><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
</div>
<table class="table table-hover table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Data type</th>
</tr>
</thead>
<tbody data-bind="foreach: ParamData">
<tr>
<td data-bind="text: ParamKey" style="width: 20%"></td>
<td data-bind="clickToEdit: ParamValue" style="width: 20%"></td>
<td data-bind="text: DataType" style="width: 20%"></td>
</tr>
</tbody>
</table>
JS:
var format = function (str, col) {
col = typeof col === 'object' ? col : Array.prototype.slice.call(arguments, 1);
return str.replace(/'{'{|'}'}|'{('w+)'}/g, function (m, n) {
if (m == "{{") {
return "{";
}
if (m == "}}") {
return "}";
}
return col[n];
});
};
var selectOptionsArr = ko.observableArray(['Blue', 'Green', 'Yellow', 'Red']);
var ParamConstr = function (key, value, dataType) {
return {
ParamKey: ko.observable(key),
ParamValue: ko.observable(value),
DataType: ko.observable(dataType)
};
};
var my = my || {};
function Generator() {}
Generator.prototype.rand = Math.floor(Math.random() * 26) + Date.now();
Generator.prototype.getId = function () {
return this.rand++;
};
var idGen = new Generator();
//var ParamData = ko.observableArray([]);
my.viewModel = {
ParamData: ko.observableArray([]),
addParam: function () {
this.ParamData.push(new ParamConstr("$$" + "key1", "Green", "Varchar"));
}
};
ko.bindingHandlers.hidden = {
update: function (element, valueAccessor) {
ko.bindingHandlers.visible.update(element, function () {
return !ko.utils.unwrapObservable(valueAccessor());
});
}
};
ko.bindingHandlers.clickToEdit = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
var observable = valueAccessor(),
link = document.createElement("a"),
input = document.createElement("select");
var id = idGen.getId();
input.setAttribute("id", id);
input.setAttribute("class", 'selectpicker');
element.appendChild(link);
element.appendChild(input);
var unwrappedArray = ko.toJS(selectOptionsArr);
for (var i = 0; i < unwrappedArray.length; i++) {
var option = document.createElement("option");
option.value = unwrappedArray[i];
option.text = unwrappedArray[i];
input.appendChild(option);
}
var arrayForSelect = [];
for (var j = 0; j < unwrappedArray.length; j++) {
arrayForSelect.push({ value: unwrappedArray[j], id: unwrappedArray[j] });
}
$('.selectpicker').val(allBindingsAccessor().selectedItem());
$('.selectpicker').selectpicker('refresh');
observable.editing = ko.observable(false);
ko.applyBindingsToNode(link, {
text: observable,
hidden: observable.editing,
click: observable.editing.bind(null, true)
});
ko.applyBindingsToNode(input, {
selectedOptions: allBindingsAccessor().selectedItem(), options: arrayForSelect, optionsText: 'value', optionsValue: 'id', selectPicker: {},
value: observable,
visible: observable.editing,
event: {
change: function (data, event) {
observable.editing(false);
return false;
}
}
});
}
};
ko.bindingHandlers.selectPicker = {
after: ['options'], /* KO 3.0 feature to ensure binding execution order */
init: function (element, valueAccessor, allBindingsAccessor) {
var $element = $(element);
$element.addClass('selectpicker').selectpicker();
var doRefresh = function () {
$element.selectpicker('refresh');
}, subscriptions = [];
// KO 3 requires subscriptions instead of relying on this binding's update
// function firing when any other binding on the element is updated.
// Add them to a subscription array so we can remove them when KO
// tears down the element. Otherwise you will have a resource leak.
var addSubscription = function (bindingKey) {
var targetObs = allBindingsAccessor.get(bindingKey);
if (targetObs && ko.isObservable(targetObs)) {
subscriptions.push(targetObs.subscribe(doRefresh));
}
};
addSubscription('options');
addSubscription('value'); // Single
addSubscription('selectedOptions'); // Multiple
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
while (subscriptions.length) {
subscriptions.pop().dispose();
}
});
},
update: function (element, valueAccessor, allBindingsAccessor) {
}
};
ko.applyBindings(my.viewModel);
$(document).ready(function () {
$(".selectpicker").selectpicker();
});
JSFiddle: http://jsfiddle.net/sourabhtewari/nkkt88v2/9/
selectpicker
不是input
节点,因此input
节点上的绑定不控制它。相反,您需要订阅editing
可观察对象。我没有给它一个逃避编辑的方法;你必须选择一个新的值来退出编辑模式。
observable.subscribe(function (newValue) {
observable.editing(false);
});
observable.editing.subscribe(function (newValue) {
$(input).selectpicker(newValue ? 'show' : 'hide');
});
observable.editing.notifySubscribers();
更新小提琴:http://jsfiddle.net/nkkt88v2/7/
相关文章:
- 可以将单元格编辑为下拉列表并使用 JQGard 进行多选
- 剑道网格编辑内联下拉列表不显示
- 在jqgrid编辑中动态刷新多选下拉列表
- JQuery文本编辑器-在工具栏中添加其他下拉列表
- 使用 Web API 编辑获取数据时,无法将数据绑定到 jqgrid 中的下拉列表
- AngularJS单击以编辑下拉列表等字段
- 单元格值未在使用自定义下拉列表编辑器的剑道 UI 网格中正确显示
- 单击下拉列表时,不要更改可编辑选择框中的背景颜色
- jqGrid - 在“编辑”上禁用内联下拉列表,但不在“添加”上禁用内联下拉列表
- 剑道网格自定义编辑器下拉列表;t反映选择
- 根据下拉列表中的选定选项选择要隐藏/显示的字段(编辑时)
- 当不处于编辑模式时,下拉列表中的Kendo单元格值显示为未定义
- 可编辑下拉列表(g:select)grails
- 使用下拉列表编辑器的剑道网格-线编辑(编辑自定义编辑器)
- 使用Json对象编辑下拉列表
- ExtJs - Javascript -网格中的组合框(单元格编辑插件)-网格/窗口后面的下拉列表
- 在Knockout中使用下拉列表进行内联编辑
- Mootools -需要编辑下拉列表的名称来获取值
- Symfony -动态下拉列表仅在编辑时不起作用
- 动态创建和编辑下拉列表的内容