iptTable规范

转x33g5p2x  于2022-07-07 转载在 其他  
字(29.8k)|赞(0)|评价(0)|浏览(172)

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 inobj){
            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 inobj){
                            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 inlist){
                                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()
                        }
                        //判断是否全选
                        functionisSelectAll(){
                            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);
            }
        }
    }
});

//表单列宽自由拖动
functionstretch($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;   
}   
        };   
    }  
}

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://www.cnblogs.com/YmmY/p/6856513.html

内容来源于网络，如有侵权，请联系作者删除！

iptTable规范

相关文章

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com