基于angularJs+ui-router+bootstrap风格的表格生成指令 

指令生成的表格

  1 /**     根据参数定制表格
  2  * api接口：
  3  *      form-model:[item1,item2,item3]
  4  *      form-properties:[
  5  *          {key:'',label:'',thClass:''},  key为item对象的key,label为该key对应的表头,thClass主要用于列少时平分一行
  6  *          ...
  7  *      ]
  8  *      对应一行后面的编辑，删除，详情按钮
  9  *      form-actions:{
 10  *          edit/delete/detail:{
 11  *              stateUrl:'',        对应点击该按钮后跳转的路由状态
 12  *              stateParams:[{
 13  *                  key:'',          用来拼接ui-router的sref-->({key:object.objectKey}),支持多参数传递。
 14  *                  objectKey:'',
 15  *              }]
 16  *          }
 17  *      }
 18  *示例
 19  *      <by-table tb-models="formModel" tb-properties="formProperties" tb-actions="formAction"></by-table>
 20  *
 21  *
 22  *
 23 
 24     model用于初始表格数据
 25     $scope.formModel = [
 26          {id:1,name:"张三",sex:'男'},
 27          {id:2,name:"李四",sex:'男'},
 28          {id:3,name:"王五",sex:'男'}
 29      ];
 30 
 31     thClass 主要用于珊格布局，控制其长度
 32      $scope.formProperties = [
 33          {key:'id',label:'ID'},
 34          {key:'name',label:'姓名','thClass':'col-md-3'},
 35          {key:'sex',label:'性别','thClass':'col-md-3'}
 36      ]
 37 
 38     配合而ui-route 完成到增删改查的路由跳转
 39      $scope.formAction = {
 40         //stateParams:
 41         //stateUrl({key:object.objectKey});
 42         //add 不需要stateUrl
 43         detail:{
 44             stateUrl:'person.detail',
 45             stateParams:{
 46                 key:'id',
 47                 objectKey:'id'
 48             }
 49         },
 50         edit:{
 51             stateUrl:'person.edit'
 52         },
 53         delete:{
 54             stateUrl:'person.delete'
 55         }
 56      }
 57  */
 58 
 59 
 60 angular.module('testApp')
 61     .directive('byTable', function(){
 62         return{
 63             restrict: 'E',
 64             templateUrl:'scripts/components/form/form-template/table.html',
 65             scope:{
 66                 tbModels:'=',
 67                 tbProperties:'=',
 68                 tbActions:'='
 69             },
 70             link:function ($scope,$elem,$attr){
 71                 $scope.hasOper = false;
 72                 var notNull = function (data){
 73                     return !!data;
 74                 }
 75 
 76                 //private action info
 77                 $scope._tbActions = {
 78                     detail:null,
 79                     delete:null,
 80                     edit:null
 81                 }
 82 
 83                 // 必须传递一个数组
 84                 //输入[{key1,value1},{key2,value2}],
 85                 //输出key1:value1,key2:value2
 86                 var getParams = function(datas){
 87                     console.log("....");
 88                     var arr_len = datas.length;
 89                     var res = "";
 90                     var i=0;
 91                     if(arr_len<=0){
 92                         return "";
 93                     }
 94 
 95                     res = datas[0].key +":tbModel." + datas[0].objectKey;
 96                     if(arr_len>1){
 97                         for(i=1;i<arr_len;i++){
 98                             res += (","+datas[i].key +":tbModel." + datas[i].objectKey);
 99                         }
100                     }
101                     return res;
102                 }
103 
104                 //get sref str by config
105                 var getSref = function(dataObj){
106                     var params = "";
107                     var strtmp = "";
108                     if(!dataObj.stateUrl){
109                         return "";
110                     }
111                     if(dataObj.stateParams){
112                         var tmp = getParams(dataObj.stateParams);
113                         params = "({"+ tmp +"})";
114                     }
115                     strtmp = dataObj.stateUrl+ params;
116                     return strtmp;
117                 }
118 
119                 //initOperContain:'edit','delete','detail'
120                 var initOper = function(){
121                     if($scope.tbActions.detail){
122                         $scope._tbActions.detail = getSref($scope.tbActions.detail)
123                     }
124                     if($scope.tbActions.edit){
125                         $scope._tbActions.edit = getSref($scope.tbActions.edit)
126                     }
127                     if($scope.tbActions.delete){
128                         $scope._tbActions.delete = getSref($scope.tbActions.delete)
129                     }
130                     console.log($scope._tbActions.detail);
131                 }
132                 initOper();
133 
134 
135                 //the oper is show?
136                 if(notNull($scope.tbActions.edit)||notNull($scope.tbActions.delete)||notNull($scope.tbActions.detail)){
137                     $scope.hasOper = true;
138                 }
139             }
140         }
141     })

 

posted @ 2016-04-22 10:13  小孩孩  阅读(733)  评论(0)    收藏  举报