I have two arrays that should to be displayed and shown as a list of checkbox. The main idea is click on element of the first list for add the element to the second list. The html code looks like this
<div class="tab-pane" id="ColumnHeading">
<div class="row">
<div class="form-group span4">
<h4>Column Headings</h4>
<ul class="icons-ul" data-bind="foreach: staticItem.ColumnHeadingList.ColumnHeadingListItem" >
<li>
<div class="span2">
<input class="selectedHeading" type="checkbox" data-bind=" click: $parent.myCheck, checkedInArray: $parent.Params.Item.ColumnHeadingList.ColumnHeadingListItem, attr: { value: Value }" />
<span data-bind="text: Name"></span>
</div>
</li>
</ul>
</div>
<div class="form-group span4" style="margin-left: -90px; margin-top: 15px">
<div class="icons-ul" data-bind="foreach: Params.Item.ColumnHeadingList.ColumnHeadingListItem" >
<div class="span4">
<input type="checkbox" data-bind="customcheck: IntOnly" />
</div>
</div>
</div>
<div class="span6">
<p class="validationMessage" data-bind="validationMessage: Params.Item.ColumnHeadingList.ColumnHeadingListItem"></p>
</div>
</div>
The value "IntOnly" is a property of each object inside of the two lists of checkbox.
my function for the click event on the first list of checkbox looks like this
self.myCheck = (function(e) {
var index = self.staticItem.ColumnHeadingList.ColumnHeadingListItem().map(function(e) { return e.Value(); }).indexOf(this.Value());
if (self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly() !== "Y") {
self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly("Y");
var o = self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index];
var flag = false;
for (i = 0; i < self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length; i++) {
if (this.Value() == self.Params.Item.ColumnHeadingList.ColumnHeadingListItem()[i].Value()) {
flag = true;
}
}
if (flag == false || self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length == 0) {
var newObject = jQuery.extend(true, {}, this);
self.Params.Item.ColumnHeadingList.ColumnHeadingListItem.push(newObject);
}
} else { //checked==true
self.staticItem.ColumnHeadingList.ColumnHeadingListItem()[index].IntOnly("N");
for (i = 0; i < self.Params.Item.ColumnHeadingList.ColumnHeadingListItem().length; i++) {
if (this.Value() == self.Params.Item.ColumnHeadingList.ColumnHeadingListItem()[i].Value()) {
self.Params.Item.ColumnHeadingList.ColumnHeadingListItem.splice(i, 1);
}
}
}
return true;
});
the code is working fine for add the element to the second list and save the value on IntOnly cuz customcheck function check that value for select the check box but I can save that property for the first list and selected those checkbox after the form is send to the server and see them for editing.
Some advises please, and sorry for the grammar.
Aucun commentaire:
Enregistrer un commentaire