首页 > 代码库 > Knockout 实现table在线编辑功能

Knockout 实现table在线编辑功能

2024-09-10 00:57:19   220人阅读

@{
    ViewBag.Title = "Tracking";
Layout = "~/Views/Shipment/_ShipmentLayout.cshtml";
}
<div class="table-responsive">
<table id="EditTable" class="table table-striped table-hover">
<thead>
<tr>
<th style="width:250px">Action</th>
<th style="width:80px">Id</th>
<th style="width:250px">SYSSERIALNO</th>
<th style="width:250px;">WORKORDERNO</th>
<th style="width:250px;">SKUNO</th>
<th style="width:250px;">SHIPPINGDATE</th>
<th style="width:250px;">SHIPPINGADDRESS</th>
<th style="width:250px;">TRACKINGNO</th>
<th style="width:250px;">REMARK</th>
<th style="width:250px;">STATUS</th>
<th style="width:250px;">MFG</th>
</tr>
</thead>
<tbody data-bind="foreach:datas">
<tr >
<td style="width:250px">
<i class="text-primary fa fa-check" data-bind="click:function(){self.saveEdit($index(),$data);}" ></i>
&nbsp;
<i class=" fa fa-pencil" data-bind="click:function(){self.clickEdit($index(),$data)},style:{color:($index()==rownum()&&editStatus())?‘red‘:‘#337Ae7‘}"></i>
 
</td>
<td style="width:80px" data-bind="text:id"></td>
<td style="width:250px" data-bind="text:SYSSERIALNO"></td>
<td style="width:250px" data-bind="text:WORKORDERNO"></td>
<td style="width:250px" data-bind="text:SKUNO"></td>
<td style="width:250px" data-bind="text:moment(SHIPPINGDATE).format(‘MM-DD-YY‘), visible: ($index()!=rownum() || !editStatus())"></td>
<td style="width:250px" data-bind="visible:$index()==rownum() && editStatus() " ><input type="text" data-bind="value:shippingdate,valueUpdate:‘afterkeydown‘" style="border-style:none;outline:none;border-bottom:1px solid #9E9E9E" /></td>
 
 
 
 
<td style="width:250px" data-bind="text:SHIPPINGADDRESS , visible: ($index()!=rownum()|| !editStatus())"></td>
<td style="width:250px" data-bind="visible:$index()==rownum() && editStatus() " ><input type="text" data-bind="value:shippingaddress,valueUpdate:‘afterkeydown‘" style="border-style:none;outline:none;border-bottom:1px solid #9E9E9E" /></td>
 
<td style="width:250px" data-bind="text:TRACKINGNO, visible: ($index()!=rownum() || !editStatus())"></td>
<td style="width:250px" data-bind="visible:$index()==rownum() && editStatus() " ><input type="text" data-bind="value:trackingno,valueUpdate:‘afterkeydown‘" style="border-style:none;outline:none;border-bottom:1px solid #9E9E9E" /></td>
 
<td style="width:250px" data-bind="text:REMARK , visible: ($index()!=rownum() || !editStatus())"></td>
<td style="width:250px" data-bind="visible:$index()==rownum() && editStatus() " ><input type="text" data-bind="value:remark,valueUpdate:‘afterkeydown‘" style="border-style:none;outline:none;border-bottom:1px solid #9E9E9E" /></td>
 
<td style="width:250px" data-bind="text:STATUS "></td>
<td style="width:250px" data-bind="text:MFG"></td>
</tr>
</tbody>
<tr class="warning" data-bind="visible: datas().length > 0">
<th style="width:250px">Action</th>
<th style="width:80px">Id</th>
<th style="width:250px">SYSSERIALNO</th>
<th style="width:250px;">WORKORDERNO</th>
<th style="width:250px;">SKUNO</th>
<th style="width:250px;">SHIPPINGDATE</th>
<th style="width:250px;">SHIPPINGADDRESS</th>
<th style="width:250px;">TRACKINGNO</th>
<th style="width:250px;">REMARK</th>
<th style="width:250px;">STATUS</th>
<th style="width:250px;">MFG</th>
</tr>
<table>
</div>
<script type="text/javascript">
var trackingViewModel=function(){
var self=this;
self.datas=ko.observableArray();
self.editStatus=ko.observable(false);
self.thisData=http://www.mamicode.com/ko.observableArray();
self.rownum=ko.observable(-1);
self.shippingdate=ko.observable();
self.shippingaddress=ko.observable();
self.trackingno=ko.observable();
self.remark=ko.observable();
 
self.refreshPage=function(){
$.ajax({
url:‘/Shipment/GetData‘,
type:‘POST‘,
dataType:‘json‘,
success:function(r){
console.log(r.data);
self.datas(r.data);
}
});
};
self.clickEdit=function(index,data){
editStatus(true);
rownum(index);
self.shippingdate(data.SHIPPINGDATE);
self.shippingaddress(data.SHIPPINGADDRESS);
self.trackingno(data.TRACKINGNO);
self.remark(data.REMARK);
 
};
 
self.saveEdit=function(index,data){
if(index==rownum())
{
editStatus(false);
console.log(data.id,self.shippingdate(),self.shippingaddress(),self.trackingno(),self.remark());
     
$.ajax({
url:‘/Shipment/SaveData‘,
type:‘POST‘,
dataType:‘json‘,
data:{id:data.id,shippingdate:self.shippingdate(),shippingaddress:shippingaddress(),trackingno:self.trackingno(),remark:self.remark()},
success:function(r){
self.refreshPage();
}
 
});
}
 
};
 
self.refreshPage();
 
};
var element=document.getElementById("EditTable");
ko.applyBindings(trackingViewModel,element);
 
</script>

Knockout 实现table在线编辑功能


联系
我们