Ags js api3.13的FeatureTable单元格渲染实践~~
发布于 3 年前 作者 outlier 2371 次浏览 来自 技术

目前已经有了两个思路,第一种改了FeatureTable的源码;第二种以AOP的思维来处理,未改源码。

/** *第一种思路 ****/


这个东西还是比较坑的啊, 流行表格控件有Gridx、DataGrid、EnhancedGrid、jqGrid、Ext Grid,但esri非要用dGrid做基础,真是没搞懂啊?谁能给我解释下? 用dGrid就用吧,Ags js api 3.13用的是dGrid “0.3.17"版本,但目前最新的已经是"0.5.0-dev”,了,而且两个版本相比改了不少地方。 所以我调的时候走了不少弯路。 最终效果: 1.png

dGrid api里关于渲染单元格的主要属性 https://github.com/SitePen/dgrid/blob/dev-0.3/doc/migrating/API-Comparison.md 3.png

渲染单元格主要靠实例dGrid的时候对columns属性添加自定义formatter和get来实现, FeatureTable是扩展的dGrid的,但由于esri的封装,FeatureTable在加载完FeatureLayer的数据后,会对columns属性做处理,处理完后也没给你事件让你有机会再更改columns。 所以我们只能改FeatureTable的源码了,大家都知道Ags js api本身不开源,发布的都是混淆且压缩后的代码,所以哥只有去看他们的混淆代码了…知道我有多惨了吧 2.png 图上是FeatureTable混淆代码,那句 this.onColumnsComplate(); 是加的入口,这个位置是FeatureTable刚刚修改完columns属性的时候,为我们的进行修改提供机会。

下面核心代码, 实例化时首先为FeatureTable添加了onColumnsComplate函数, 然后我“强行”修改了最后一个column的属性, 其中get属性比较关键,他返回了一个button标签,上面API里说了dgrid supports formatter functions, but doesn’t support returning a widget from them.所以这里只能返标签,这也给我们造成了难题,怎么挂上点击事件的回调函数。因为这个button标签只能调window域的函数,这里我只有调dojo的topic(是单例)来传消息了。另外我把数据的OBJECTID挂在了Button标签上,免得我们都不知道点的是谁。

this.fTable = new FeatureTable({

“featureLayer” : this.fl, “hiddenFields”: ["“], “map” : this.map, “outFields”:[”"], “onColumnsComplate”:function(){

var c = this.columns[this.columns.length-1]; var hn = c[“headerNode”]; hn.field = hn.field.replace(c[“field”],"_del"); hn.innerText = hn.innerText.replace(c[“field”],“操作”); c[“field”] = “_del”; c[“label”] = “操作”; c[“formatter”] = function (value) {return value; };
c[“get”] = function(obj){

return "<button style=“width:48px;height:20px” "+ “value=’” + obj[“OBJECTID”] + “’” + "onclick='var m=this;require([\"dojo\/topic\"],function(topic){topic.publish(\“FeatureTableCellClick\",m)});’” + ">删除</button>"; }; } }, this.div);


/** *第二种思路 ****/


正常初始化,在load事件后开始注入AOP函数

this.fTable = new FeatureTable({ “featureLayer” : this.fl, “hiddenFields”: [“OBJECTID”], “map” : this.map, “outFields”:[“OBJECTID”,“TEXT”,“TYPE”,“BTEXT”,“YS”,“PID”] }, this.div); on(this.fTable , “load”, lang.hitch(this,this.dgridLoadComplate));

先看源码,关键切入点在dgrid的两个set后,一个改变了列的样式,一个加载了数据 1.png 那这两个set会跑到哪去呢,翻翻dgrid的源码就知道了 2.png 所以我们就找到了切入函数的名称 “_setColumns”,"_setStore"

dgridLoadComplate:function(){ aspect.after(this.fTable.grid,"_setColumns",lang.hitch(this,this.dgridSetColumnsHanddle)); aspect.after(this.fTable.grid,"_setStore",lang.hitch(this,this.dgridSetStoreHanddle)); },

后面的思路就是在 "_setColumns"完成后,修改columns的样子,这里可以在标签内注入你的div 1.png

在"_setStore"完成后,通过数据中带的id,找到相应的div,然后…想怎么渲染就怎么渲染… 2.png

最后效果

3.png

最后,我得抱怨下esri的闭源政策,现在这个web时代,开源的垄断才是高明的垄断,至少esri在前端玩闭源,真是没必要,从个人感受来讲,我现在明显喜欢用openlayers的东西,同时越来越倾向于走开源GIS路线。 分享使人进步,闭源使人龌龊。

2 回复

欢迎大神入驻thinkgis 发自 ThinkGIS ionic

赞,开源的东西像leaflet,mapbox结合足够能做一些牛逼的GIS应用了。

赞助本站 点击广告
回到顶部