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

 
  1 /**     根据参数定制表格
  * api接口：
  *      form-model:[item1,item2,item3]
  *      form-properties:[
  *          {key:'',label:'',thClass:''},  key为item对象的key,label为该key对应的表头,thClass主要用于列少时平分一行
  *          ...
  *      ]
  *      对应一行后面的编辑，删除，详情按钮
  *      form-actions:{
  *          edit/delete/detail:{
  *              stateUrl:'',        对应点击该按钮后跳转的路由状态
  *              stateParams:[{
  *                  key:'',          用来拼接ui-router的sref-->({key:object.objectKey}),支持多参数传递。
  *                  objectKey:'',
  *              }]
  *          }
  *      }
  *示例
  *      <by-table tb-models="formModel" tb-properties="formProperties" tb-actions="formAction"></by-table>
  *
  *
  *
 
     model用于初始表格数据
     $scope.formModel = [
          {id:1,name:"张三",sex:'男'},
          {id:2,name:"李四",sex:'男'},
          {id:3,name:"王五",sex:'男'}
      ];
 
     thClass 主要用于珊格布局，控制其长度
      $scope.formProperties = [
          {key:'id',label:'ID'},
          {key:'name',label:'姓名','thClass':'col-md-3'},
          {key:'sex',label:'性别','thClass':'col-md-3'}
      ]
 
     配合而ui-route 完成到增删改查的路由跳转
      $scope.formAction = {
         //stateParams:
         //stateUrl({key:object.objectKey});
         //add 不需要stateUrl
         detail:{
             stateUrl:'person.detail',
             stateParams:{
                 key:'id',
                 objectKey:'id'
             }
         },
         edit:{
             stateUrl:'person.edit'
         },
         delete:{
             stateUrl:'person.delete'
         }
      }
  */
 
 angular.module('testApp')
     .directive('byTable', function(){
         return{
             restrict: 'E',
             templateUrl:'scripts/components/form/form-template/table.html',
             scope:{
                 tbModels:'=',
                 tbProperties:'=',
                 tbActions:'='
             },
             link:function ($scope,$elem,$attr){
                 $scope.hasOper = false;
                 var notNull = function (data){
                     return !!data;
                 }
 
                 //private action info
                 $scope._tbActions = {
                     detail:null,
                     delete:null,
                     edit:null
                 }
 
                 // 必须传递一个数组
                 //输入[{key1,value1},{key2,value2}],
                 //输出key1:value1,key2:value2
                 var getParams = function(datas){
                     console.log("....");
                     var arr_len = datas.length;
                     var res = "";
                     var i=0;
                     if(arr_len<=0){
                         return "";
                     }
 
                     res = datas[0].key +":tbModel." + datas[0].objectKey;
                     if(arr_len>1){
                         for(i=1;i<arr_len;i++){
                             res += (","+datas[i].key +":tbModel." + datas[i].objectKey);
                         }
                     }
                     return res;
                 }
 
                 //get sref str by config
                 var getSref = function(dataObj){
                     var params = "";
                     var strtmp = "";
                     if(!dataObj.stateUrl){
                         return "";
                     }
                     if(dataObj.stateParams){
                         var tmp = getParams(dataObj.stateParams);
                         params = "({"+ tmp +"})";
                     }
                     strtmp = dataObj.stateUrl+ params;
                     return strtmp;
                 }
 
                 //initOperContain:'edit','delete','detail'
                 var initOper = function(){
                     if($scope.tbActions.detail){
                         $scope._tbActions.detail = getSref($scope.tbActions.detail)
                     }
                     if($scope.tbActions.edit){
                         $scope._tbActions.edit = getSref($scope.tbActions.edit)
                     }
                     if($scope.tbActions.delete){
                         $scope._tbActions.delete = getSref($scope.tbActions.delete)
                     }
                     console.log($scope._tbActions.detail);
                 }
                 initOper();
 
                 //the oper is show?
                 if(notNull($scope.tbActions.edit)||notNull($scope.tbActions.delete)||notNull($scope.tbActions.detail)){
                     $scope.hasOper = true;
                 }
             }
         }
     })