将表中单击的行的结果绑定到另一个表中的另一行中
Binding the results of a clicked row inside a table into another row in another table
我有一个表格,一个搜索链接作为它的列之一。 当我单击搜索时,会弹出一个带有搜索框选项的 Ajax 弹出窗口扩展器面板。 搜索是通过 Web 服务调用完成的,结果绑定在面板内的表中。我使表行可单击,并且我希望单击的行绑定到第一个表。我遇到的问题是跟踪每一行。当我单击面板中的一行时,第一个表中的所有行都会绑定,而不仅仅是那一行。我不知道如何跟踪我单击了哪一行。非常感谢任何帮助,我已经为此苦苦挣扎了好几天。这是我的代码:
JavaScript
$(document).ready(function () {
MyAccountModel = new AccountViewModel()
ko.applyBindings(MyAccountModel );
})
var passedmodel;
var MyAccountModel;
var AccountViewModel = function () {
var self = this;
self.model = {};
self.invoice = ko.observableArray([new invoice()]);
//Ajax Call to search accounts (working and binding fine)
self.GetAccounts = function () {
var searchstring = document.getElementById("<%=txtaccountsearch.ClientID %>").value;
var DTO = { 'searchstring': searchstring };
var AccountURL = "ajaxwebservicecalls.asmx/GetAccount";
$.ajax({
type: "Post",
url: AccountURL,
data: JSON.stringify(DTO),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function add(msg) {
passedmodel = ko.mapping.fromJS(msg.d);
MyMasterviewModel.MyAccountModel.invoice(passedmodel);
},
error: ONAccountFailure
});
}
function ONAccountFailure(xhr, ex) {
alert(xhr.responseText);
}
self.CurrentDisplayAccount = ko.observableArray([new CurrentDisplayAccount()])
//this is to select a row inside the panel
self.selectAccount = function (item) {
self.CurrentDisplayAccount(item);
};
.HTML
我不会显示弹出扩展器/面板代码以节省空间。这是 knokcout 表绑定
<table id="Table3">
<tr>
<th> Account Code </th>
<th> Description </th>
<th> Account Type </th>
<th> Purpose </th>
</tr>
<tbody data-bind="foreach:MyAccountModel.invoice().GLAccounts">
<tr data-bind="click: MyMasterviewModel.MyAccountModel.selectAccount">
<td data-bind=" text: $data.FormattedGLAccount"></td>
<td data-bind="text: $data.GLAccountDescription"></td>
<td data-bind="text: $data.GLAccountTypeName" ></td>
<td data-bind="text: $data.GLAccountLongDescription" ></td>
</tr>
</tbody>
</table>
现在,每当我单击上表的任何行时,结果都会绑定到下表中的两行。但是,我只想将其绑定到我单击搜索的行。
<td align="left">
<table border="0" cellspacing="0" cellpadding="0">
<th> Account </th>
<th> Amount </th>
<th> Reference </th>
<th> Description </th>
<tbody databind="foreach: MyAccountModel.CurrentDisplayAccount()" >
<td >
<input data-bind="text: $data.FormattedGLAccount" />
</td>
<td >
<input data-bind="text:$data.GLAccountDescription"/>
</td>
<td >
<input data-bind="text: $data.GLAccountTypeName" />
</td>
<td >
<input data-bind="text: $data.GLAccountLongDescription" /> </td>
<td>
<asp:HyperLink runat="server" ID="HyperLink1" NavigateUrl="javascript:$find('ModalPopupExtenderaccountsearchbehav').show();" Text="Search" />
</td>
</tbody>
<--second row:-->
<tr>
<td >
<input data-bind="text: $data.FormattedGLAccount" /> </td>
<td >
<input data-bind="text: $data.GLAccountDescription" /> </td>
<td >
<input data-bind="text: $data.GLAccountTypeName" /> </td>
<td >
<<input data-bind="text: $data.GLAccountLongDescription" />
</td>
<td >
<asp:HyperLink runat="server" ID="HyperLink2" NavigateUrl="javascript:$find ('ModalPopupExtenderaccountsearchbehav').show();" Text="Search" />
</td>
</tr>
</table>
</td>
我尝试更改语法绑定,但它仍然保持绑定两者。我尝试了一个foreach循环,但没有成功。我想我需要获取 thr row 的索引,但我不知道如何做到这一点。请帮忙!!
更新
这是指向我 http://jsfiddle.net/KwvrZ/7/尝试做的事情的小提琴的链接。我希望能够单击第一个表中的任何行,并且该行应绑定到第二个表。如果我随后单击第一个表中的另一行,它应该绑定到第二个表的第二行。希望这是有道理的。
我真的需要一些帮助!
对问题的描述不是很清楚。 您的更新有所帮助,但我在尝试弄清楚您想要完成的任务时遇到了麻烦。
你只会显示 2 行吗? 如果是这样,则需要在两个可观察量中跟踪每个选择。
标记:
<tbody>
<tr data-bind="with: CurrentDisplayAccount1">
<td>
<input data-bind="value: FormattedGLAccount" />
</td>
<td>
<input data-bind="value: GLAccountDescription" />
</td>
<td style="padding-left: 4px; padding-right: 2px;"> <a href="#" onclick="javascript:$find('ModalPopupExtenderaccountsearchbehav').show();">Search</a>
</td>
</tr>
<tr data-bind="with: CurrentDisplayAccount2">
<td>
<input data-bind="value: FormattedGLAccount" />
</td>
<td>
<input data-bind="value: GLAccountDescription" />
</td>
<td style="padding-left: 4px; padding-right: 2px;"> <a href="#" onclick="javascript:$find('ModalPopupExtenderaccountsearchbehav').show();">Search</a>
</td>
</tr>
</tbody>
在您的视图模型中:
self.CurrentDisplayAccount1 = ko.observable();
self.CurrentDisplayAccount2 = ko.observable();
self.selectAccount = function (item) {
if(!self.CurrentDisplayAccount1()) {
self.CurrentDisplayAccount1(item);
} else if(!self.CurrentDisplayAccount2()){
self.CurrentDisplayAccount2(item);
}
};
这是你的小提琴工作方式:http://jsfiddle.net/JoeDoyle23/KwvrZ/11/
或者,是否要将每个选定的行添加到表中,没有限制? 在这种情况下,CurrentDisplayAccount 需要是一个可观察的数组,而第二个表需要使用 foreach 绑定。单击某一行时,该行将添加到"当前显示帐户"数组中。如果您希望第二个表不允许重复项,则只需在添加之前在数组中检查它。
标记:
<tbody data-bind="foreach: CurrentDisplayAccount">
<tr>
<td>
<input data-bind="value: FormattedGLAccount" />
</td>
<td>
<input data-bind="value: GLAccountDescription" />
</td>
<td style="padding-left: 4px; padding-right: 2px;"> <a href="#" onclick="javascript:$find('ModalPopupExtenderaccountsearchbehav').show();">Search</a>
</td>
</tr>
在您的视图模型中:
self.CurrentDisplayAccount = ko.observableArray([]);
self.selectAccount = function (item) {
self.CurrentDisplayAccount.push(item);
};
这是你的小提琴以这种方式工作(减去重复检查):http://jsfiddle.net/JoeDoyle23/KwvrZ/12/
希望这些例子能够让你摆脱困境。
- 在VanillaJS中模拟模型双向数据绑定
- 无法通过数组映射绑定
- 主干-不管怎样,检查事件以前是否绑定过
- 用于搜索的聚合物嵌套绑定
- Angular:更新一次性绑定的数据
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- react.js中的密钥绑定
- 使用regex的jquery keydown绑定不会验证撇号和句点
- 将事件处理程序绑定到任何可能的事件
- AngularJS指令只识别双向绑定类型
- Telerik rad组合框多列数据绑定
- 对API数据使用声明性绑定
- 如何销毁/删除/取消绑定SnapSVG.js
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 数据绑定:'系统Char'不包含名为'xxxxx'
- react组件中的绑定方法
- 如何将ngrepeat下的ngmodel绑定到$scope
- 使用 jQuery 将对象绑定到一行
- 将handsontable中所做的更改绑定到handsontable中同一行中的另一个值
- 将表中单击的行的结果绑定到另一个表中的另一行中