如何在knocket js中绑定表中的默认选定行
How to bind a default selected row from table in knockout js
在我的应用程序中,我通过调用WebApi服务绑定了一个表。
我已经编写了代码,当选择了特定的行时,它会显示选定的行,并且运行良好。
现在,我想在webapi方法返回成功消息后,默认情况下显示一个选定的行。
我应该如何在成功方法内部调用"SelectConfig"。当我尝试的时候,没有任何回报。请帮我解决这些问题。
我的HTML:
<tbody data-bind="foreach: datas">
<tr>
<td style="vertical-align: middle;">
<asp:CheckBox ID="chkChild" runat="server" />
</td>
<td style="vertical-align: middle;">
<a id="aTag" data-bind="text: (Name().length > 20 ? Name().substring(0, 20) + '....' : Name()), value: ID, click: $parent.SelectConfig"></a>
</td>
<td style="vertical-align: middle;" data-bind="text: Type == '' || Type == null || Type == undefined ? '--' : Type"></td>
</tr>
</tbody>
<div data-bind="with: Selected, visible: isVisibleDetails">
<div class="col-md-8 value" data-bind="text: (Name() == '' || Name() == null || Name() == undefined) ? '--' : Name">
<select id="ddlType_E" data-bind="options: $root.ddlTypes, optionsText: 'Type', optionsValue: 'ID', optionsCaption: 'Select..', value: selectedTypeId" class="form-control"></select>
</div>
我的视图模型:
<script type="text/javascript">
function oppConfig(ID, Name,TypeID) {
this.ID = ko.observable(ID);
this.Name = ko.observable(Name);
this.selectedTypeId = ko.observable(TypeID);
}
function ViewModel() {
var self = this;
this.datas= ko.observableArray([]);
getdatas();
this.ddlTypes = ko.observableArray([]);
getOppType();
}
this.Selected = ko.observable(this.datas()[0]);
//selectItem
this.SelectConfig = function (oppConfig) {
alert(ko.toJSON(oppConfig));
self.Selected(oppConfig);
}
function datas() {
$.ajax({
type: "GET",
url: '---',
dataType: "json",
cache: false,
crossDomain: true,
processData: true,
success: function (data) {
self.datas.destroyAll();
if (data.length > 0) {
$.each(data, function (index) {
self.datas.push(new oppConfig(data[index].ID, data[index].Name, data[index].Type));
});
//Here, I want the to call the select config
}
else {
}
},
error: function (data) {
}
});
}
ko.applyBindings(new ViewModel());
</script>
您需要在HTML标记中包含绑定到<tr>
元素的数据。现在,您有一个显示所选内容的div,但没有显示所选值本身。
<tbody data-bind="foreach: model.datas">
<tr data-bind="click: $root.selectThing, css: { selected: isSelected} ">
然后在视图模型中,添加一个函数以返回所选内容:同时为对象本身添加一个可观察的对象。
function ViewModel() {
var self = this;
this.datas= ko.observableArray([0]);
getdatas();
this.ddlTypes = ko.observableArray([]);
getOppType();
self.CurrentDisplayThing = ko.observable();
self.selectThing = function(item){
self.model.CurrentSelected = ko.observable();
}
}
最后,在表示配置类的对象中,添加一个isSelected变量,这是一个淘汰函数。
function oppConfig(ID, Name,TypeID) {
this.ID = ko.observable(ID);
this.Name = ko.observable(Name);
this.selectedTypeId = ko.observable(TypeID);
self.isSelected = ko.computed(function(){
return selected() === self;
}
}
一些CSS来显示您的选择:
.selected { background-color: yellow; }
thead tr {
border:1px solid black;
background:lightgray;
}
tbody tr {
border:1px solid black;
cursor: pointer;
}
相关文章:
- 当显式定义控制器参数时,默认模型绑定器会发生异常
- 我可以通过使用函数绑定来保留默认值吗?如果没有,为什么
- ng-model 绑定到选择标签生成的空默认值
- 如何在knocket js中绑定表中的默认选定行
- 即使使用默认教程,也无法应用淘汰绑定
- 取消绑定 e.prevent默认 从另一个函数转发到链接单击
- jQuery Mobile - 为什么将默认值绑定到 mobileinit
- 如何停止绑定到 AMQP 默认交换
- 如果绑定为空,则为 Angular 默认值
- 角度-引导-滑块默认值/双向绑定
- “this”的默认绑定与 Chrome 浏览器和 Node.js 不同
- KO选项绑定在页面重新加载时将值保存为默认值
- 当文本区域绑定到模型时,angularjs中的默认文本区域值
- 当通过AJAX绑定选项时,是否可以将select元素的默认值传递给Knockout
- 如何使用Knockout JS数组映射根据输入条件使选择选项绑定默认值
- 将复选框的默认值绑定到角度模型,其中true和amp;false表示为'是'&'没有'
- 如何将事件处理程序绑定到Google Maps V3 API默认PanControl's单击事件
- 在AngularJs中绑定Key-Value对Object时,在下拉菜单中设置默认选择
- 使用AngularJS的双向数据绑定设置SELECT的默认值
- 绑定observableArray中未定义的字段或提供默认值