iptTable规范
规范之HTML
先在当前页面放入几个表格设置按钮的html（样式可能需重新调整）
<div class="bottom_nav1 ta_l" style="padding: 0;height: 32px;width: 300px;margin:4px auto 0;">
<a class="qxfp" ng-click="addRow();" href="javascript:void(0)" >添加货品行</a>
<a class="qxfp" ng-click="cutRow();" href="javascript:void(0)" >减少货品行</a>
<a class="qxfp" ng-click="setTabel()" href="javascript:void(0)" >自定义货品行</a>
<div class="setTableRow" style="display:inline-block;top: 381px;">
<div ng-show="setTabelShow" style="margin:30px 0; bottom:0; top:auto; ">
<div class="listShow" style="height: 250px;">
<div ng-repeat="hd in headList" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)">
<label ng-drag="true" ng-drag-data="hd">
<input ng-model="myCheck" type="checkbox" ng-checked="!hd.isHide" ng-click="myChange($index)"/>{{hd.name}}
<br />
</label>
</div>
</div>
<div class="botBtn">
<div class="selectBtn">
<label><input type="checkbox" id="selectAllBtn" ng-model="selectAllModel" ng-click="selectAll()" />全选</label>
<label><input type="checkbox" ng-model="selectBackModel" ng-click="selectBack()" />反选</label>
</div>
<a class="saveBtn" style="width: 40px" ng-click="saveRowSet()" href="javascript:void(0)">保存</a>
<a class="cancelBtn" style="width: 40px" ng-click="cancelRowSet()" href="javascript:void(0)">取消</a>
</div>
</div>
</div>
</div>
由于组件已经标签化，因此我们html导入一个组件化标签
<my-Ipt-Table name="tablaData"></my-Ipt-Table>
标签会引用到iptTable.html
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="myTab" class="yd_table_list xx_kzj" style="table-layout: fixed;">
<tr class="list_header">
<td style="width:90px" ng-repeat="hd in headList" ng-hide="hd.isHide" ng-class="{true:'bj_f83'}[hd.istatol]">{{hd.name}}</td>
</tr>
<tr ng-repeat="data in tableData track by $index">
<!-- 循环 -->
<td ng-repeat="hd in headList" ng-hide="hd.isHide" style="width:150px;" ipt-repeat-finish>
<div ng-if="hd.type=='diy1'">
<input type="hidden" ng-model= "data[hd.code][modelHid]"/>
<input id="{{data[hd.code].id}}" maxlength="255" type="text" ng-disabled="all" class="form_input input_td co_35a" ng-model="data[hd.code].value" ng-focus="showOrHideGoodsNameSelect($parent.$parent.$index, 1);" ng-blur="showOrHideGoodsNameSelect($parent.$parent.$index, 0);" ng-change="echoData($parent.$parent.$index,hd.code,data[hd.code].value,data[hd.code].model)"/>
<div class="list_xl ng-cloak" style="margin-left: 1px; margin-top: 6px; height: 220px; width: 280px;" ng-show="data[hd.code].showGoodsName">
<h2>请选择常见品名</h2>
<i class="list_xl_icon icon"><a class="gone" href="javascript:void(0)" ng-click="showOrHideGoodsNameSelect($parent.$parent.$index, 0);"></a></i>
<div class="list_xl_tbody">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr ng-repeat="obj in commonGoodsName" ng-click="selectGoodsName($parent.$parent.$parent.$index,obj);">
<td class="ng-cloak" style="width:100%; border-right: 0px;">{{obj.codeValue}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div ng-if="hd.type=='select'" class="yd_select"><select id="{{data[hd.code].id}}" class="xl_z" style="padding: 0 10px 0 5px;" ng-model="data[hd.code].value" ng-disabled="all" ng-options="objCon.codeValue as objCon.codeName for objCon in packTypeData" ng-change="echoData($parent.$parent.$index,hd.code,data[hd.code].value,data[hd.code].model)"></select></div>
<input ng-if="hd.type=='input'" id="{{data[hd.code].id}}" type="text" class="form_input input_td" ng-disabled="all" maxlength="{{data[hd.code].maxlength}}" ng-model="data[hd.code].value" ng-change="goChange($parent.$parent.$index,hd.code,data[hd.code].change,data[hd.code].value,data[hd.code].model)" my-double-val="{{data[hd.code].doubleVal}}" ng-blur="goBlur($parent.$parent.$index,hd.code,data[hd.code].blur)" ng-keyup="goKeyup($parent.$parent.$index,hd.code,data[hd.code].keyup)">
<div ng-if="hd.type=='buttonVolume'" style="position: relative;">
<input id="{{data[hd.code].id}}" type="text" class="form_input input_td" ng-focus="goFocus($parent.$parent.$index,hd.code,data[hd.code].focus);" ng-disabled="all" maxlength="{{data[hd.code].maxlength}}" ng-model="data[hd.code].value" ng-change="goChange($parent.$parent.$index,hd.code,data[hd.code].change,data[hd.code].value,data[hd.code].model)" my-double-val="{{data[hd.code].doubleVal}}" ng-blur="goBlur($parent.$parent.$index,hd.code,data[hd.code].blur);" ng-keyup="goKeyup($parent.$parent.$index,hd.code,data[hd.code].keyup)">
<i class="icon_j" ng-show="volume{{$parent.$parent.$index}}" ng-click="showVolumeAlert($parent.$parent.$index,hd.code);"><img src="../image/$tenantId$/jsj.png" ng-src="" alt=""></i>
</div>
<div ng-if="hd.type=='buttonWeight'" style="position: relative;">
<input id="{{data[hd.code].id}}" type="text" class="form_input input_td" ng-focus="goFocus($parent.$parent.$index,hd.code,data[hd.code].focus);" ng-disabled="all" maxlength="{{data[hd.code].maxlength}}" ng-model="data[hd.code].value" ng-change="goChange($parent.$parent.$index,hd.code,data[hd.code].change,data[hd.code].value,data[hd.code].model)" my-double-val="{{data[hd.code].doubleVal}}" ng-blur="goBlur($parent.$parent.$index,hd.code,data[hd.code].blur);" ng-keyup="goKeyup($parent.$parent.$index,hd.code,data[hd.code].keyup)">
<i class="icon_j" ng-show="weight{{$parent.$parent.$index}}" ng-click="showWeightAlert($parent.$parent.$index,hd.code);"><img src="../image/$tenantId$/jsj.png" ng-src="" alt=""></i>
</div>
</td>
</tr>
<tr>
<td ng-repeat="hd in headList" ng-hide="hd.isHide">{{amountList[hd.code].value == 0 ? '' : amountList[hd.code].value}}</td>
</tr>
</table>
规范之JS：
创建一个head的数组对象（用于遍历table列数）
var head = [
{code:"_goodsName",type:"diy1",name:"货品名",istatol:true},
{code:"_packingType",type:"select",name:"包装",istatol:true},
{code:"_packageCounts",type:"input",name:"包装件数",istatol:true},
{code:"_volume",type:"buttonVolume",name:"体积(方)",istatol:true},
{code:"_volumeUnit",type:"input",name:"体积单价",istatol:false},
{code:"_weight",type:"buttonWeight",name:"重量(千克)",istatol:true},
{code:"_weightUnit",type:"input",name:"重量单价",istatol:false},
{code:"_installCosts",type:"input",name:"配安费",istatol:false},
{code:"_branchFee",type:"input",name:"送货费",istatol:false},
{code:"_mountingCosts",type:"input",name:"安装费",istatol:false},
{code:"_freight",type:"input",name:"运费",istatol:true},
{code:"_discount",type:"input",name:"回扣",istatol:false},
{code:"_collectingMoney",type:"input",name:"代收货款",istatol:false},
{code:"_procedureFee",type:"input",name:"代收手续费",istatol:false},
{code:"_advanceMoney",type:"input",name:"垫付货款",istatol:false},
{code:"_deliveryCosts",type:"input",name:"物流配送费",istatol:false},
{code:"_pickingCosts",type:"input",name:"提货费",istatol:false},
{code:"_actualBillCosts",type:"input",name:"实际提货费",istatol:false},
{code:"_upstairsFee",type:"input",name:"上楼费",istatol:false},
{code:"_goodsPrice",type:"input",name:"申明价值",istatol:false},
{code:"_offer",type:"input",name:"保险费",istatol:false},
{code:"_handingCosts",type:"input",name:"装卸费",istatol:false},
{code:"_packingCost",type:"input",name:"包装费",istatol:false},
{code:"_shortDistanceFee",type:"input",name:"短途费",istatol:false},
{code:"_actualShortDistanceFee",type:"input",name:"实际短途费",istatol:false},
{code:"_installCount",type:"input",name:"安装件数",istatol:false},
{code:"_custOrder",type:"input",name:"订单号",istatol:false},
{code:"_transferCharge",type:"input",name:"中转费",istatol:false}
];
code:与下面数组对象相对应；
type:该列的类型，例如input为输入类型，特殊类型可自行起名，如diy1;
name:该列的名称；
istatol:表头是否有特殊样式，有则true;
之后创建一个tableData数组对象（用于存储每行的信息）
var tableData = {
_goodsName:{value:"",name:"货品名",id:"_goodsName0",type:"diy1",maxlength:"255",model:"goodsName",modelHid:"id",showGoodsName:false},
_packingType:{value:"",name:"包装",id:"_packingType0",model:"packingType",value:""},
_packageCounts:{value:"",name:"包装件数",id:"_packageCounts0",type:"input",maxlength:"11",model:"packageCounts",change:"$scope.upNum('form.goodsDetail.goods_i.packageCounts'); $scope.updateCount();"},
_volume:{value:"",name:"体积(方)",id:"_volume0",type:"buttonVolume",model:"volume",maxlength:"8",focus:"$scope.ngFocusShow(1,goods_i)",blur:"$scope.ngBlurShow(1,goods_i)",change:"$scope.calculatePrice();$scope.updateGoodsDetailAmount();$scope.updateTotalCosts();",doubleVal:"keyup"},
_volumeUnit:{value:"",name:"体积单价",id:"_volumeUnit0",type:"input",maxlength:"8",model:"volumeUnit",change:"$scope.calculatePrice();$scope.updateGoodsDetailAmount();$scope.updateTotalCosts();",doubleVal:"keyup"},
_weight:{value:"",name:"重量(千克)",id:"_weight0",type:"buttonWeight",maxlength:"8",model:"weight",focus:"$scope.ngFocusShow(2,goods_i)",blur:"$scope.ngBlurShow(2,goods_i)",change:"$scope.calculatePrice();$scope.updateGoodsDetailAmount();$scope.updateTotalCosts();",doubleVal:"keyup"},
_weightUnit:{value:"",name:"重量单价",id:"_weightUnit0",type:"input",maxlength:"8",model:"weightUnit",change:"$scope.calculatePrice();$scope.updateGoodsDetailAmount();$scope.updateTotalCosts();",doubleVal:"keyup"},
_installCosts:{value:"",name:"配安费",id:"_installCosts0",type:"input",maxlength:"11",model:"installCosts",change:"$scope.updateGoodsDetailAmount();$scope.changeServiceType();$scope.modifyMoney();",doubleVal:"keyup",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();"},
_branchFee:{value:"",name:"送货费",id:"_branchFee0",type:"input",maxlength:"11",model:"branchFee",change:"$scope.updateGoodsDetailAmount();$scope.changeServiceType();$scope.modifyMoney();",doubleVal:"keyup",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();"},
_mountingCosts:{value:"",name:"安装费",id:"_mountingCosts0",type:"input",maxlength:"11",model:"mountingCosts",change:"$scope.updateGoodsDetailAmount();$scope.changeServiceType();$scope.modifyMoney();",doubleVal:"keyup",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();"},
_freight:{value:"",name:"运费",id:"_freight0",type:"input",maxlength:"11",model:"freight",change:"$scope.updateGoodsDetailAmount();$scope.modifyMoney();",doubleVal:"keyup",keyup:"$scope.upCosts('form.goodsDetail.goods_i.freight')",blur:"$scope.updateTotalCosts();$scope.updateGoodsDetailAmount();"},
_discount:{value:"",name:"回扣",id:"_discount0",type:"input",maxlength:"11",model:"discount",change:"$scope.updateGoodsDetailAmount();",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();",doubleVal:"keyup"},
_collectingMoney:{value:"",name:"代收货款",id:"_collectingMoney0",type:"input",maxlength:"11",model:"collectingMoney",change:"$scope.updateGoodsDetailAmount();",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();",doubleVal:"keyup"},
_procedureFee:{value:"",name:"代收手续费",id:"_procedureFee0",type:"input",maxlength:"11",model:"procedureFee",change:"$scope.updateGoodsDetailAmount();",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();",doubleVal:"keyup"},
_advanceMoney:{value:"",name:"垫付货款",id:"_advanceMoney0",type:"input",maxlength:"11",model:"advanceMoney",change:"$scope.updateGoodsDetailAmount();",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();",doubleVal:"keyup"},
_deliveryCosts:{value:"",name:"物流配送费",type:"input",maxlength:"11",model:"deliveryCosts",change:"$scope.updateGoodsDetailAmount();$scope.modifyMoney();",doubleVal:"keyup",blur:"$scope.updateGoodsDetailAmount();",keyup:"$scope.upCosts('form.goodsDetail.goods_i.deliveryCosts')"},
_pickingCosts:{value:"",name:"提货费",id:"_pickingCosts0",type:"input",maxlength:"11",model:"pickingCosts",change:"$scope.updateGoodsDetailAmount();$scope.modifyMoney();",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();",doubleVal:"keyup"},
_actualBillCosts:{value:"",name:"实际提货费",id:"_actualBillCosts0",type:"input",maxlength:"11",model:"actualBillCosts",change:"$scope.updateGoodsDetailAmount();$scope.modifyMoney();",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();",doubleVal:"keyup"},
_upstairsFee:{value:"",name:"上楼费",type:"input",maxlength:"11",model:"upstairsFee",change:"$scope.updateGoodsDetailAmount();$scope.modifyMoney();",blur:"$scope.updateGoodsDetailAmount();",doubleVal:"keyup",keyup:"$scope.upCosts('form.goodsDetail.goods_i.upstairsFee')"},
_goodsPrice:{value:"",name:"申明价值",id:"_goodsPrice0",type:"input",maxlength:"11",model:"goodsPrice",change:"$scope.updateGoodsDetailAmount();",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();",doubleVal:"keyup",keyup:"$scope.upCosts('form.goodsDetail.goods_i.goodsPrice')"},
_offer:{value:"",name:"保险费",id:"_offer0",type:"input",maxlength:"11",model:"offer",change:"$scope.updateGoodsDetailAmount();$scope.modifyMoney();",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();",doubleVal:"keyup"},
_handingCosts:{value:"",name:"装卸费",id:"_handingCosts0",type:"input",maxlength:"11",model:"handingCosts",change:"$scope.updateGoodsDetailAmount();$scope.modifyMoney();",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();",doubleVal:"keyup"},
_packingCost:{value:"",name:"包装费",id:"_packingCosts0",type:"input",maxlength:"11",model:"packingCosts",change:"$scope.updateGoodsDetailAmount();$scope.modifyMoney();",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();",doubleVal:"keyup"},
_shortDistanceFee:{value:"",name:"短途费",id:"_shortDistanceFee0",type:"input",maxlength:"11",model:"shortDistanceFee",change:"$scope.updateGoodsDetailAmount();$scope.modifyMoney();",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();",doubleVal:"keyup"},
_actualShortDistanceFee:{value:"",name:"实际短途费",id:"_actualShortDistanceFee0",type:"input",maxlength:"11",model:"ctualShortDistanceFee",change:"$scope.updateGoodsDetailAmount();$scope.modifyMoney();",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();",doubleVal:"keyup"},
_installCount:{value:"",name:"安装件数",id:"_installCount0",type:"input",maxlength:"11",model:"installCount",change:"$scope.updateGoodsDetailAmount();$scope.modifyMoney();",blur:"$scope.updateGoodsDetailAmount();",doubleVal:"keyup",keyup:"$scope.upCosts('form.goodsDetail.goods_i.installCount')"},
_custOrder:{value:"",name:"订单号",id:"_custOrder0",type:"input",model:"custOrder"},
_transferCharge:{value:"",name:"中转费",id:"_transferCharge0",type:"input",maxlength:"11",model:"transferCharge",change:"$scope.updateGoodsDetailAmount();$scope.modifyMoney();",doubleVal:"keyup",blur:"$scope.updateTotalCosts(); $scope.updateGoodsDetailAmount();"}
}
name:该列的名称（方便知道对应的head，可以删除）；
value:用于存储输入时的值；（input类型是必填）
id:当前ID（第一行若为_goodsName0，第二行会生成_goodsName1，如此类推）；（必填）
maxlength：设置输入位数；
model：当前的model值；（有input是必填）
change：ng-change时需要运行的方法（可动态传参，具见下）；
keyup：ng-keyup时需要运行的方法；
focus:ng-focus时需要运行的方法；
blur:ng-blur时需要运行的方法；
之后创建一个amountList数组对象（用于表格脚部的费用统计）
var amountList = {
_goodsName:{name:"货品名",value:"合计"},
_packingType:{name:"包装",value:""},
_packageCounts:{name:"包装件数",value:""},
_volume:{name:"体积(方)",value:""},
_volumeUnit:{name:"体积单价",value:""},
_weight:{name:"重量(千克)",value:""},
_weightUnit:{name:"重量单价",value:""},
_installCosts:{name:"配安费",value:""},
_freight:{name:"运费",value:""},
_branchFee:{name:"送货费",value:""},
_mountingCosts:{name:"安装费",value:""},
_discount:{name:"回扣",value:""},
_collectingMoney:{name:"代收货款",value:""},
_procedureFee:{name:"代收手续费",value:""},
_advanceMoney:{name:"垫付货款",value:""},
_deliveryCosts:{name:"物流配送费",value:""},
_pickingCosts:{name:"提货费",value:""},
_actualBillCosts:{name:"实际提货费",value:""},
_upstairsFee:{name:"上楼费",value:""},
_goodsPrice:{name:"申明价值",value:""},
_offer:{name:"保险费",value:""},
_handingCosts:{name:"装卸费",value:""},
_packingCosts:{name:"包装费",value:""},
_shortDistanceFee:{name:"短途费",value:""},
_actualShortDistanceFee:{name:"实际短途费",value:""},
_installCount:{name:"安装件数",value:""},
_custOrder:{name:"订单号",value:""},
_transferCharge:{name:"中转费",value:""}
}
name:该列的名称（方便知道对应的head，可以删除）；
value:统计的数值；
在当前页面angular的controller方法，我们需要做点事情
$scope.rowLength = 2; //table初始行数
$scope.headList = head;
$scope.amountList = amountList;
controller一开始的时候还需要运行一下这方法生成我们的tableData（该方法可以用于重新初始化表格信息）
initTableData : function(){
$scope.tableData = [];
var tableDataCopy = [];
for(var i=0;i<$scope.rowLength;i++){
var obj = $.extend(true,{},tableData);
for(o in obj){
var id = o + i;
obj[o].id = id; //重新生成对应的ID
if(obj[o].keyup != undefined){ //方法动态传参
var keyup = "$scope.upCosts('form.goodsDetail.goods_" + i + "." + obj[o].model +"')"
obj[o].keyup = keyup;
}
}
tableDataCopy.push(obj);
}
$scope.tableData = tableDataCopy;
for(var i=0;i<$scope.tableData.length;i++){
var name = "goods_" + i;
if($scope.form.goodsDetail[name] == undefined){
$scope.form.goodsDetail[name] = {};
}
}
},
change、keyup等动态传参方法可参照这里
var keyup = "$scope.upCosts('form.goodsDetail.goods_" + i + "." + obj[o].model +"')"
其中i表示行数（第一行为0，第二行为1）
另外我们需要用到第三方插件ngDraggable，因此当前页面需要引用ngDraggable.js
<script type="text/javascript" src="../js/ngDraggable.js"></script>
除此之外我们单独创建了一个该组件js文件，iptTable.js
开始我们先导入ngDraggable插件
var iptTable = angular.module("iptTable", ["ngDraggable"]);
之后为my-Ipt-Table创建一个指令方法
iptTable.directive('myIptTable', function() {
return {
restrict:"E",
templateUrl : function(tElement, tAttrs) {
return '/js/table/iptTable.html?ver='+tAttrs.ver; //请填写您iptTTable.html的路径
},
scope:function(){
},
controller : [ "$scope", "commonService", "$timeout","$interval",
function($scope, commonService, $timeout,$interval){
var table = {
init : function(){
$scope.goChange = this.goChange;
$scope.goBlur = this.goBlur;
$scope.goKeyup = this.goKeyup;
$scope.addRow = this.addRow;
$scope.cutRow = this.cutRow;
$scope.goFocus = this.goFocus;
$scope.echoData = this.echoData;
$scope.clearRowData = this.clearRowData;
this.setRow();
},
echoData : function(index,code,value,model){ //同步form与tableData的数据
var goods = "goods_" + index;
if(value == 0){
$scope.tableData[index][code].value = "";
}else{
$scope.tableData[index][code].value = value;
}
if($scope.form.goodsDetail[goods] == undefined){
$scope.form.goodsDetail[goods] = {};
$scope.form.goodsDetail[goods][model] = value;
}else{
$scope.form.goodsDetail[goods][model] = value;
}
// console.log($scope.form.goodsDetail[goods][model]);
},
goChange : function(index,code,change,value,model){
// console.log(index+'，'+code+'，'+change+'，'+value+'，'+model);
if(change != undefined){
var goods = "goods_" + index;
change = change.replace(/goods_i/g,goods); //如果方法里有传参，替换goods_i;
$scope.tableData[index][code].change = change;
$scope.echoData(index,code,value,model);
var func = $scope.tableData[index][code].change;
eval(func)
}
},
goBlur : function(index,code,blur){
if(blur != undefined){
blur = blur.replace(/goods_i/g,index); //如果方法里有传参，替换goods_i;
$scope.tableData[index][code].blur = blur;
var func = $scope.tableData[index][code].blur;
eval(func)
}
},
goFocus : function(index,code,focus){
if(focus != undefined){
focus = focus.replace(/goods_i/g,index); //如果方法里有传参，替换goods_i;
$scope.tableData[index][code].focus = focus;
var func = $scope.tableData[index][code].focus;
eval(func)
}
},
goKeyup : function(index,code,keyup){
if(keyup != undefined){
var func = $scope.tableData[index][code].keyup;
eval(func)
}
},
addRow : function(){
var obj = $.extend(true,{},tableData);
var index = $scope.tableData.length;
for(o in obj){
var id = o + index;
obj[o].id = id;
if(obj[o].keyup != undefined){
var keyup = "$scope.upCosts('form.goodsDetail.goods_" + index + "." + obj[o].model +"')"
obj[o].keyup = keyup;
}
}
$scope.tableData.push(obj);
var name = "goods_" + index;
$scope.form.goodsDetail[name] = {};
$timeout(function(){
setContentHeight();
},300);
// 重新绑定快捷键
$scope.registerKeyEvent()
},
cutRow : function(){
var tbIndex = $scope.tableData.length-1;
$scope.clearRowData(tbIndex);
var name = "goods_" + tbIndex;
$scope.tableData.splice(tbIndex,1);
$scope.form.goodsDetail[name] = {};
$scope.goChange();
$timeout(function(){
setContentHeight();
},300);
},
clearRowData : function(tbIndex){
for(var obj in $scope.tableData[tbIndex]){
$scope.echoData(tbIndex,obj,0,$scope.tableData[tbIndex][obj].model);
}
},
setRow : function(){
// 请求后台回去列显示信息
var headList = window.top.tableHead["goodsRow"];
if(typeof headList != "undefined" && headList != null && headList != ""){
for(var i in $scope.headList){
var hd = $scope.headList[i];
$scope.headList[i].isHide = true;
if(headList.hasOwnProperty(hd.name+"#"+hd.code)){
$scope.headList[i].isHide = false;
}
}
var list=[];
for(var i in $scope.headList){
var hd = $scope.headList[i];
list.push(hd);
}
for(var i in list){
var hd = list[i];
if(headList.hasOwnProperty(hd.name+"#"+hd.code)){
var index = parseInt(headList[hd.name+"#"+hd.code]);
var otherObj = $scope.headList[index];
var otherIndex = $scope.headList.indexOf(hd);
$scope.headList[index] = hd;
$scope.headList[otherIndex] = otherObj;
}
}
}
// 列表设置显示隐藏
$scope.setTabelShow = false;
$scope.setTabel = function(){
isSelectAll()
if($scope.setTabelShow){
$scope.setTabelShow = false;
}else{
$scope.setTabelShow = true;
}
}
//保存表格设置
$scope.saveRowSet = function(){
var headConfig={};
headConfig.tableName ="goodsRow";
headConfig.sysTableHeadConfigList = [];
$scope.tableHeadValue = {};
//组装要保存的table，目前保存需要显示的
for(var i in $scope.headList){
var hd = $scope.headList[i];
if(!hd.isHide){
var tableHeadConfig = {};
tableHeadConfig.headName = hd.name;
tableHeadConfig.headCode = hd.code;
tableHeadConfig.headIndex = i;
headConfig.sysTableHeadConfigList.push(tableHeadConfig);
$scope.tableHeadValue[hd.name+"#"+hd.code]=i;
}
}
var param = {};
param.paramStr = JSON.stringify(headConfig);
var url = "sysTableHeadConfigBO.ajax?cmd=saveSysTableHeadConfigs";
commonService.postUrl(url,param,function(data){
commonService.alert("保存完成!",function(){
$scope.setTabelShow = false;
//更新头部的参数
window.top.tableHead[$scope.tableName]=$scope.tableHeadValue;
$scope.$apply();
});
});
}
// 取消保存
$scope.cancelRowSet = function(){
$scope.setTabelShow = false;
}
// 显示隐藏列
$scope.myChange = function(index){
if($scope.headList[index].isHide){
$scope.headList[index].isHide = false;
}else{
$scope.headList[index].isHide = true;
}
isSelectAll();
}
// 拖动调整
$scope.onDropComplete = function (index, obj, evt) {
var otherObj = $scope.headList[index];
var otherIndex = $scope.headList.indexOf(obj);
$scope.headList.splice(otherIndex,1);
$scope.headList.splice(index,0,obj);
}
// 全选
$scope.selectAll = function(){
for(var i in $scope.headList){
$scope.headList[i].isHide = false;
}
}
// 反选
$scope.selectBack = function(){
for(var index in $scope.headList){
if($scope.headList[index].isHide){
$scope.headList[index].isHide = false;
}else{
$scope.headList[index].isHide = true;
}
}
isSelectAll()
}
// 判断是否全选
function isSelectAll(){
var isAll = true;
for(var i in $scope.headList){
if($scope.headList[i].isHide){
isAll = false;
$("#selectAllBtn").prop({checked:false});
}
}
if(isAll){
$("#selectAllBtn").prop({checked:true});
}
}
}
}
table.init();
}],
};
});
各个方法的用处：
init:初始化；
echoData：同步form与tableData的数据（如今与页面输入绑定的值为tableData的value,但是为了不改变原来联运汇的数据结构，因此页面数据改变时需同步改变form对应的值，对于新项目建议直接操作tableData的value）；
goChange、goBlur、goFocus、goKeyup：运行ng-Change、ng-Blur、ng-Focus、ng-Keyup，如需方法动态传参也可参考这里；
addRow：增加一行，与initTableData方法相似；
cutRow：减少一行；
clearRowData：清除当前一行所有数据；
setRow：表格设置；
最后还有一个表格宽度拖拽，首先需要判断一下ng-repeat是否结束
html（一开始的html其实已经有写）：
<td ng-repeat="hd in headList" ng-hide="hd.isHide" style="width:150px;" ipt-repeat-finish></td>
iptTable.js：
//判断是否渲染完毕
iptTable.directive('iptRepeatFinish',function(){
return {
link: function($scope,element,attr){
if($scope.$last == true){
stretch($scope);
}
}
}
}); //表单列宽自由拖动
function stretch($scope){
var myTAbId = document.getElementById("myTab");
var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
var wData = {};
for (var j = 0; j < myTAbId.rows[0].cells.length; j++) { myTAbId.rows[0].cells[j].onmousedown = function (event) {
//记录单元格
tTD = this;
if (event.offsetX > tTD.offsetWidth - 10) {
tTD.mouseDown = true;
tTD.oldX = event.clientX;
tTD.oldWidth = tTD.offsetWidth;
}
//记录Table宽度
//table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement;
//tTD.tableWidth = table.offsetWidth;
};
myTAbId.rows[0].cells[j].onmouseup = function (event) {
//结束宽度调整
if (tTD == undefined) tTD = this;
tTD.mouseDown = false;
tTD.style.cursor = 'default';
};
myTAbId.rows[0].cells[j].onmousemove = function (event) {
//更改鼠标样式
if (event.offsetX > this.offsetWidth - 10)
this.style.cursor = 'col-resize';
else
this.style.cursor = 'default';
//取出暂存的Table Cell
if (tTD == undefined) tTD = this;
//调整宽度
if (tTD.mouseDown != null && tTD.mouseDown == true) { tTD.style.cursor = 'default';
if (tTD.oldWidth + (event.clientX - tTD.oldX)>0)
tTD.width = tTD.oldWidth + (event.clientX - tTD.oldX);
//调整列宽
tTD.style.width = tTD.width;
tTD.style.cursor = 'col-resize';
// myTAbId.rows[8].cells[j].style.width = tTD.width;
//调整该列中的每个Cell
myTAbId = tTD; while (myTAbId.tagName != 'TABLE') myTAbId = myTAbId.parentElement;
for (var k = 0; k < myTAbId.rows.length; k++) {
myTAbId.rows[k].cells[tTD.cellIndex].width = tTD.width;
}
//调整整个表
//table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth);
//table.style.width = table.width;
}
};
}
}
iptTable规范的更多相关文章
- iOS代码规范（OC和Swift）
下面说下iOS的代码规范问题,如果大家觉得还不错,可以直接用到项目中,有不同意见 可以在下面讨论下. 相信很多人工作中最烦的就是代码不规范,命名不规范,曾经见过一个VC里有3个按钮被命名为button ...
- node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- 百度MIP页规范详解 —— canonical标签
百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...
- JavaScript var关键字、变量的状态、异常处理、命名规范等介绍
本篇主要介绍var关键字.变量的undefined和null状态.异常处理.命名规范. 目录 1. var 关键字:介绍var关键字的使用. 2. 变量的状态:介绍变量的未定义.已定义未赋值.已定义已 ...
- JavaScript 开发规范
本篇主要介绍JS的命名规范.注释规范以及框架开发的一些问题. 目录 1. 命名规范:介绍变量.函数.常量.构造函数.类的成员等等的命名规范 2. 注释规范:介绍单行注释.多行注释以及函数注释 3. 框 ...
- c#语言规范
0x00 分类 C#语言规范主要有两个来源,即我们熟知的ECMA规范和微软的规范.尽管C#的ECMA规范已经前后修订4次,但其内容仅仅到C# 2.0为止.所以慕容为了方便自己和各位方便查询,在此将常见 ...
- OSGi规范的C#实现开源
这是大约在3-4年前完成的一个C#实现的OSGi框架,实现的过程参照了OSGi规范与与一些实现思路(感谢当时的那些资料与项目),此框架虽然仅在几个小型项目有过实际的应用,但OSGi的规范实现还是相对比 ...
- 【腾讯优测干货分享】如何降低App的待机内存（二）——规范测试流程及常见问题
本文来自于腾讯优测公众号(wxutest),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/806TiugiSJvFI7fH6eVA5w 作者:腾讯TMQ专项测 ...
- 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code
最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜! // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...
随机推荐
- Hive的基本概念和常用命令
原文链接: https://www.toutiao.com/i6766571623727235595/?group_id=6766571623727235595 一.概念: 1.结构化和非结构化数据 ...
- Win10+Java7环境配置
原文链接: https://www.toutiao.com/i6487838676326810125/ 安装包: jdk-7u79-windows-x64-20151024 打开安装目录 双击运行程序 ...
- Webstorm安装与配置
一 下载 链接:https://pan.baidu.com/s/1gKxzGWvnoCpXPoe8zzfLnQ 提取码:5lyf 二 安装 https://www.jb51.net/softs/598 ...
- 我选择了MySQL和SpringData JPA
我是3y,一年CRUD经验用十年的markdown程序员常年被誉为优质八股文选手 今天想跟大家聊聊数据库层面上的事,austin项目继续更新(注:今天聊的数据库都特指关系型数据库) 01.数据库选择 ...
- 【系统学习ES6】第二节：解构赋值
[系统学习ES6] 本专题旨在对ES6的常用技术点进行系统性梳理,帮助大家对其有更好的掌握,希望大家有所收获. ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.解构是一种打 ...
- 如何更改Docker已经挂载的目录
更改docker已经挂载的目录,主要有两种方式:一是重新创建容器,二是更改配置文件.第一种方式较为简单,下面具体演示第二种方式,通过更改配置文件来更换目录 挂载. 安装docker yum -y in ...
- Android官方文档翻译 一 Getting Started
Getting Started 让我们开始吧! Welcome to Training for Android developers. 欢迎来到Android开发者训练营. Here you'll f ...
- Sentry 开发者贡献指南 - 测试技巧
作为 CI 流程的一部分,我们在 Sentry 运行了多种测试. 本节旨在记录一些 sentry 特定的帮助程序, 并提供有关在构建新功能时应考虑包括哪些类型的测试的指南. 获取设置 验收和 pyth ...
- [µC/GUI 学习]µC/GUI移植
一.什么是µC/GUI µC/GUI为任何需要图形显示器的嵌入式应用提供了一种灵活的图形用户界面(GUI).µC/GUI允许软件工程师在使用了LCD显示器的产品上增加美轮美奂的用户界面,从简单的2D黑 ...
- java实现excel表格导入数据库表
导入excel就是一个上传excel文件,然后获取excel文件数据,然后处理数据并插入到数据库的过程 一.上传excel 前端jsp页面,我的是index.jsp 在页面中我自己加入了一个下载上传文 ...