Dtgrid plug-in integration into the angular environment for tabular data presentation

00 the world without complaining

Weekend efficiency is low, two days no more, look at this look at that, installed a WIN10 found the touchpad driver not fit, and then looked for a long time, 23333.

Angularjs use of time is very short, advanced usage a little too much, $digest, $watch the principle of this kind of thing seems to be very arduous ah, there are a lot of demand in the back to use this to do #￥@%#@!

01. Look at the effect first.

All data related information here is directly configured to the DB , as metadata, including search conditions, display methods, data filters and so on, the configuration is currently only implemented a few, plus the more configuration, the more business can be applied to the wider. The data itself is also in db, and in the background it is simple to implement the ability to control collection level CRUD permissions.

After entering criteria search:

Dtgrid advertising ^_^

Angularjs has a very good form plug-in angular ui-grid. But in the high wall, API is not easy to find, so I found a very good domestic form plug-in Dtgrid. This plugin is based on jquery, and jquery and angular are very good compatibility, so a little transformation can be used in the angular environment.

Here are detailed documentation and examples, www.dtGrid.com,

10. Front end "Implementation"

The HTML section defines a <div ng-dt-grid id= "user" ></div> is used to let the angular execute instructions, the default attribute-level directives, and so on, without having to write, directly link to perform the operation. The implementation of the quotation marks is also because many configurations are not implemented, the intention is to do the paging first.

↑ dividing line ↑var comdirective = angular.module (' comdirective ', []); Controllers that rely on this module will compile this instruction comdirective.directive ("Ngdtgrid", function () {return {/* Templat  E: "<div id= ' toolbar ' ></div>",//not a good impl *///First edition, the first to achieve multi-conditional query and display, a lot of Dtgrid comes with features not fully ported, slowly to link: function (scope, element, Attrs, ctrl) {$.post ('/displaydata/' + attrs.id,{},function (data) {///GO backstage based on the data set to be displayed) Take the configuration of this data set 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 core configuration lang: ' Zh-cn ', Ajaxloa                        D:false, Datas:scope.data, Columns:dtgridcolumns,                    gridcontainer:data._id, Pagesize:20, Pagesizelimit: [10, 20, 50]                    }; Scope.grid = $.fn.   Dtgrid.init (dtgridoption); displayed on the DOM (Dtgrid plug-in usage $.fn.                    Dtgrid.init) Scope.grid.refresh ();                        $ ("#search-" +data._id). Click (function () {///define some of the configuration of the data search criteria, such as whether the search condition is a string or a date or a drop-down box, and so on, here to extract the search criteria                        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"). V                                    Al ();                                    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) CRI                                      Teria. $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,//Data interface, put MonGodb encapsulation of the rest interface, paging is not implemented, do not hurry, slowly {where:criteria,option:{page:[0,20]}}, function (data) {if (data instanceof Array) {Scope.dat                   A = data;  Load the data returned by the server into the grid to Scope.grid.reload.apply (Scope.grid); Key point!                                    The Dtgrid code uses this to fetch the data set, but here is not scope.grid,apply} else {                                TODO Toast//error handling has not written yet, slow to alert (data);                    }                            }                        );                });        }            }); }    }});

02. Backstage "Implementation"

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.optionEasymongo.find (Docs[0].collectionname,req.query.where | | {},{},function(err,data) {if(Err) res.send (mapping.errorCode.paramError); Elseres.send (data);            }); }        }    });};

View Code

Hey, is not very little. The reason for this is that a lot of the configuration is not implemented in the metadata logic yet.

First read the metadata configuration, then check the OK, the method of generating the parameters in the angular instruction, can be adapted in MongoDB.

Here Easymongo is the author encapsulates a MongoDB additions and deletions to the interface, the connection pool seems to be a little explosion, still looking for reasons. No use mongoose reason is mongoose is actually the data interface HardCode in the schema, and I want to achieve the effect is the data interface even business logic itself in the database, for different needs, just add a Bson, find a write front end, it is finished. Abstract the back end, for the common CMS system and lower complexity of the system is fully achievable.

11. This is a few days to write the project is not called Open source, portal

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

The author in a company internship, because the internship is fast and do not intend to stay, the eldest brother raised a demand, basically is my own how to realize how to achieve. This project is half-public and half-private.

The specific code is here, and the project is just beginning. Welcome to add bricks to overweight.

Dtgrid plug-in integration into the angular environment for tabular data presentation