首页 > 代码库 > iptTable规范
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 =http://www.mamicode.com/= 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 =http://www.mamicode.com/ { _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 =http://www.mamicode.com/= 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 =http://www.mamicode.com/ {}; 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规范
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。