您当前位置:首页 > 文章中心 > SCSCMS > 技术探讨

jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-09-10   阅读次数: 335   查看权限: 游客查看

AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout" 等

AJAX返回的html或者是js定义的html无法做到自动渲染为EasyUI的样式。比如:class="easyui-linkbutton" 等,虽然我们可以对应执行代码来渲染它,但前提是你得知道它是什么控件,比如:

$("body").append('<a href="javascript:void(0)" id="a" class="easyui-linkbutton">确定按钮</a>');//生成控件html
$("#a").linkbutton();//渲染

但是假如控件不确定时就不能使用以上方法,我们可以为其扩展一个方法。

(function ($) {
    $.parser = {
        auto:true,
        plugins:['linkbutton', 'menu', 'menubutton', 'splitbutton', 'layout','tree', 'window', 'dialog', 'datagrid','combobox', 'combotree', 'numberbox', 'validatebox','calendar', 'datebox', 'panel', 'tabs', 'accordion'],
        parse:function (context) {
            if ($.parser.auto) {
                for (var i = 0; i < $.parser.plugins.length; i++) {
                    (function () {
                        var name = $.parser.plugins[i];
                        var r = $('.easyui-' + name, context);
                        if (r.length) {
                            if (r[name]) {
                                r[name]();
                            } else if (window.easyloader) {
                                easyloader.load(name, function () {
                                    r[name]();
                                })
                            }
                        }
                    })();
                }
            }
        }
    };
})(jQuery);

这样当某些html增加后就可调用$.parser.parse(context)来渲染控件。context  为待查找的 DOM 元素集、文档或 jQuery 对象,为空时默认为整个文档

关键词: jquery easyui,ajax,控件渲染   编辑时间: 2013-09-10 10:57:49

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程