EasyUI 插件使用

╰+攻爆jí腚メ 2022-02-13 10:57 406阅读 0赞

## link ##

[API zh][]  
[EasyUI源码 简单解析][EasyUI_]  
[EasyUI最简答的插件-弹出框(messager)的使用][EasyUI_-_messager]  
[EasyUI panel插件的使用][EasyUI panel]

## usage ##

*  文档查看(如查看`progressbar`插件的方法，属性和事件)  
    有三种方法：
    
     *  源码(需熟悉源码结构)。
     *  查看[官网文档][Link 1]，快，容易理解。
     *  直接在浏览器控制台中查询(推荐)，更快。  
        `$.fn.progressbar.methods` 对象中包含插件`progressbar`的方法。  
        `$.fn.progressbar.defaults` 对象中包含插件`progressbar`的属性和事件。  
        用`JSON.stringify(obj, replacer, space)`方法打印要查看的对象。为显示成员方法，`replacer`为：
    
        var replacer = function(key, value) {
          if (typeof value == "function") {
            return value.toString();
          }
          return value;
        }
    
    即：

JSON.stringify($.fn.progressbar.defaults, function(key, value) {
      if (typeof value == "function") {
        return value.toString();
      }
      return value;
    }, "\t");

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70]

*  设置|更新插件的属性|事件|方法`$(selector).plugiinName({propertyList});`，如：

$("#p").panel({
      title: "标题",
      iconCls: "icon-save",
      href: "/GetUserList",
      extractor: function(data) {
        return data;  // 对获取的数据进行提取
      },
      onLoad: function() { alert("数据加载完成"); }
    });

*  调用插件方法 `$(selector).pluginName("funcName", parameter)`，如：  
    `$("#p").panel("refresh", "/GetData");` 刷新panel的数据。  
    `$("#p").panel("options");` 方法返回选中panel插件的选项options。

// 用JSON.stringify()方法打印插件的所有options(包括方法)。
    var obj = $("#p").panel("options");
    JSON.stringify(obj, function(key, value) {
        if (typeof value == "function") {
            return value.toString();
        }
        return value;
    }, "\t");

[API zh]: http://www.jeasyui.net/plugins/
[EasyUI_]: https://blog.csdn.net/wuyujin1997/article/details/89343489
[EasyUI_-_messager]: https://blog.csdn.net/wuyujin1997/article/details/89394962
[EasyUI panel]: https://blog.csdn.net/wuyujin1997/article/details/89604615
[Link 1]: http://www.jeasyui.net/plugins/157.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_22_color_000000_t_70]: /images/20220213/1bc159d77fa44c15a7134cb803a2c281.png