你的位置:首页 > Java教程

[Java教程]dtGrid插件集成到Angular环境实现表格化数据展现


00没有抱怨的世界

周末效率好低,两天没更了,看看这看看那,装了个win10发现触摸板驱动不适配,然后找了好久都不行,23333。

AngularJS用的时间很短,高级的用法有点吃不消了,$digest,$watch这种东西的原理看起来好吃力啊,后面还有大把大把的需求要用这个来做了#¥@%#@!

 

01.先看看效果吧

这里的所有数据相关信息都是直接配置到DB的,作为元数据,包括搜索条件,显示方式,数据过滤器等等,配置目前只实现了几个,加的配置越多,能适用的业务就越广。数据本身也是在DB的,在后台简单的实现了控制Collection级别CRUD权限的功能。

输入条件搜索之后:

dtGrid小广告^_^

AngularJS有一款非常好的表格插件Angular ui-grid。但是奈何在高墙之上,API不好找,于是本人找到了一款国内非常不错的表格插件DtGrid。这个插件是基于jQuery写的,而jQuery和Angular的兼容性又非常棒,于是稍加改造就可以用在Angular环境下了。

这里有详细的文档和实例,www.dtGrid.com,

 

10.前端"实现"

html部分定义了一个<div ng-dt-grid id="user"></div>用于让Angular执行指令,默认的属性级指令等等参数都不用写了,直接link执行操作。实现打引号也是因为很多配置都没有实现,打算先把分页做了。

↑ 分割线 ↑var comDirective = angular.module('comDirective', []);   //依赖这个模块的controller均会编译这条指令comDirective.directive("ngDtGrid",function(){            return {    /* template : "<div id='toolbar'></div>", //not a good impl */ //第一版,先实现多条件查询和展示,很多dtGrid附带的功能还没有完全移植,慢慢来    link : function(scope, element, attrs, ctrl){      $.post('/displayData/'+ attrs.id,{},function(data){  //先去根据要显示的数据集去后台拿这个数据集的配置        if(!!data._id) {          scope.metaData = data;          scope.data = [];          scope.init = true;          /**           * init data grid           * */          var dtGridColumns = [];          $.each(data.columns,function(obj){                  dtGridColumns.push({              id:data.columns[obj].columnName,              title:data.columns[obj].displayName,              type: data.columns[obj].dataType == "date"? data.columns[obj].dataType : "string",              columnClass:'text-center'            });          });          var dtGridOption = {          //dtGrid核心配置            lang : 'zh-cn',            ajaxLoad : false,            datas : scope.data,            columns : dtGridColumns,            gridContainer : data._id,            pageSize : 20,            pageSizeLimit : [10, 20, 50]          };          scope.grid = $.fn.DtGrid.init(dtGridOption);  //显示到DOM上 (dtGrid 插件的用法 $.fn.DtGrid.init)          scope.grid.refresh();          $("#search-"+data._id).click(function(){    //定义的数据搜索条件的一些配置,比如这个搜索条件是字符串还是日期还是选择下拉框等等,这里提取搜索条件            var criteria = {};            $.each(data.columns,function(col){              if(data.columns[col].searchable) {                var fieldVal = null;                var fieldType = data.columns[col].dataType;                var colName = data.columns[col].columnName;                if(fieldType == 'date') {                  var dateFrom = $("#"+data.columns[col].columnName + "From").val();                  var dateTo = $("#"+data.columns[col].columnName + "To").val();                  criteria[colName] = {};                  if(dateFrom.length != 0) criteria[colName].$gt = new Date(dateFrom).getTime();                  if(dateTo.length != 0) criteria[colName].$lt = new Date(dateTo).getTime();                } else {                  fieldVal = $("#"+data.columns[col].columnName).val().replace(/\s+/,"");                  if(fieldType == 'array') {                    if(fieldVal.split(/[,|,|;|;]/).length != 0) {                      var optionsObj = [];                      var tempArray = fieldVal.split(/[,|,|;|;]/);                      for(var i = 0;i< tempArray.length;i++) {                        if(tempArray[i].trim().length != 0) {                            var tempObj = {};                     tempObj[colName] = tempArray[i];                            optionsObj.push(tempObj);              }                      }                      if(!criteria.$and) {                        criteria.$and = [];                      }                      if(optionsObj.length != 0)                        criteria.$and.push({$or:JSON.stringify(optionsObj)});                    }                  } else if(fieldType instanceof Object) {                    if(fieldType.multiSelect) {                      //todo append $or options to $and property                      if(fieldVal.length != 0)                        criteria[colName] = fieldVal;                    } else {                      if(fieldVal.length != 0)                        criteria[colName] = fieldVal;                    }                  } else {                    if(fieldVal.length != 0)                      criteria[colName] = fieldVal;                  }                }              }            });            $.get("/collection/"+data._id,         //数据接口,把MongoDB封装了REST接口,分页暂时还没实现,不要急,慢慢来              {where:criteria,option:{page:[0,20]}},              function(data) {                if(data instanceof Array) {                  scope.data = data;          //把服务器返回的数据装到Grid里面去                  scope.grid.reload.apply(scope.grid); //关键点!dtGrid的代码里是使用this来取数据集的,但是这里的this并不是scope.grid,apply一下                } else {                  //todo toast             //错误处理还没有写啦啦啦,慢慢来                  alert(data);                }              }            );          });        }      });    }  }});

 

02.后台"实现"

exports.findCollectionData = function(req,res){  EasyMongo.find("meta",{_id:req.params.id},function(err,docs){    if(err) res.send(mapping.errorCode.basicServerError);    else {      if(docs.length == 0) {        res.send(mapping.errorCode.paramError);      } else if(docs.length > 1){        res.send(mapping.errorCode.dirtyDataError);      } else {        //todo option req.query.option        EasyMongo.find(docs[0].collectionName,req.query.where || {},{},function(err,data){          if(err) res.send(mapping.errorCode.paramError);          else res.send(data);        });      }    }  });};

View Code

嘿嘿,是不是很少。少的原因是大把大把的配置在元数据的逻辑还没有实现。。

先读取元数据配置,再查一把就OK,参数的生成方式在Angular指令中完成的,可以适应在MongoDB中。

这里的EasyMongo是笔者封装的一个MongoDB增删改查的接口,目前连接池好像有点爆炸,还在找原因。没有用Mongoose的原因是Mongoose其实是把数据接口hardcode在了Schema里面,而笔者想达到的效果是数据接口甚至业务逻辑本身也在数据库里面,对于不同的需求,只需增加一条BSON,找个写前端的,就完成了。把后端抽象出来,对于普通的CMS系统和较低复杂度系统是完全可以实现的。

 

11.这种才写几天的项目就不叫开源了,传送门->

https://git.oschina.net/code2life/SuperTurtle.git

笔者在某家公司实习,由于实习期快到并且不打算留下来,老大提了一个需求,基本是我自己想怎么实现怎么实现了。这个项目算是半公半私吧。

具体的代码在这里了,项目刚开始。欢迎添砖加码。