在ArcGIS WebAppBuilder中的widget中嵌入EasyUI的图形化控件

 可以在widget中嵌入EasyUI的datagrid控件了。

具体实现如下：

在JSViewer的index.html引入EasyUI的css和js文件

然后widget的widget.html加入EasyUI的div元素

然后widget的widget.js加入如下代码

 然后code.js文件就和我们平常用EasyUI做开发完全一样的写法

代码到这里还没完，为了在widget里能用框架的this.map对象，jQuery，Dojo和ArcGIS 的 api

我在框架的index.html里引入了全局变量mainMap

然后在widget.js里给全局变量mainMap赋值

此时的code.js可以非常灵活了，代码如下：

$(document).ready(
	function (){
        gisCode();
	}		
);

function gisCode(){
     require([
      "dojo/dom",
      "dojo/on",
      "esri/Color",
      "esri/config",
      "esri/geometry/webMercatorUtils",
      "esri/graphic",
      "esri/geometry/Extent",
      "esri/lang",
      "esri/map",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleMarkerSymbol",
      "dojo/domReady!"
    ],
    function (dom, on, Color, esriConfig, webMercatorUtils, Graphic,Extent,lang, Map, SimpleFillSymbol, SimpleLineSymbol,
      SimpleMarkerSymbol){

       var initExtent = new Extent({ "xmin": -17731, "ymin": 6710077, "xmax": -12495, "ymax": 6712279, "spatialReference": { "wkid": 102100} });
       showExtent(initExtent);
       jQueryCode();
          
      function showExtent(event_extent){
        console.info("Map extent-change", JSON.stringify(event_extent));
        var innerContent;
        var extent = webMercatorUtils.webMercatorToGeographic(event_extent);
        innerContent = "XMin: " + extent.xmin.toFixed(2) + " " +
          "YMin: " + extent.ymin.toFixed(2) + " " +
          "XMax: " + extent.xmax.toFixed(2) + " " +
          "YMax: " + extent.ymax.toFixed(2);
        console.info(innerContent);
      }

      // jQuery stuff
      function jQueryCode(){
        list_dgApps_generate();

        var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_X,
          12, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
            new Color([92, 156, 255, 1]), 4));

        var graphic;

        on(mainMap, "click", function (event){
          console.log("Map click event");
          // Add a graphic at the clicked location
          if (graphic) {
            graphic.setGeometry(event.mapPoint);
          }
          else {
            graphic = new Graphic(event.mapPoint, markerSymbol);
            mainMap.graphics.add(graphic);
          }

          formatNumber = function (value, key, data){
            return value.toFixed(2);
          };

          var infoContent = lang.substitute(
            webMercatorUtils.webMercatorToGeographic(event.mapPoint),
            "LatitudeLMC (y): ${y:formatNumber} <br> LongitudeLMC (x): ${x:formatNumber}");

          mainMap.infoWindow.setTitle("Location:");
          mainMap.infoWindow.setContent(infoContent);
          mainMap.infoWindow.show(event.mapPoint);
        });
      }

        //生成项目列表datagrid
        function list_dgApps_generate(){
            $('#dgApps').datagrid({    
                url:null, 
                rownumbers:true,
                singleSelect:true,
                remoteSort:false,
                method:'get',
                sortName:'name',
                sortOrder:'asc',
                columns:[[    
                    {field:'details',width:50,align:'center',title:'详情'
                    },
                    {field:'name',width:100,align:'center',title:'应用程序名称',sortable:true
                    },
                    {field:'available',width:80,align:'center',title:'运行状态',
                        formatter: function(value,row,index){
                            if (value == true){
                                return '<span class="greencolor">运行中</span>';
                            } else {
                                return '<span class="redcolor">未运行</span>';
                            }
                        }
                    },
                    {field:'displayName',title:'描述',width:200},
                    {field:'requestCount',title:'Request 数量',width:90},
                    {field:'sessionTimeout',title:'Session 时效',width:90,align:'right',
                        formatter: function(value,row,index){
                            return value + '分钟';
                        }}
                ]]    
            });  
            var data2=[
        {'details':'运行中','name':'namea','available':true,'displayName':'displayname1','requestCount':20,'sessionTimeout':180},
        {'details':'运行中2','name':'nameb','available':false,'displayName':'displayname2','requestCount':30,'sessionTimeout':280}
        ];
            $('#dgApps').datagrid('loadData', data2);  
            
        }//end list_dgApps_generate

     
    });
}