EasyUI在Panel上动态添加LinkButton按钮


Posted in Javascript onAugust 11, 2017

在最近做的一个将原来的旧系统翻新改造的项目中,为了在个别展示位置与原系统一直,研究了一下Easyui的panel面板,在panel的面板中动态添加Linkbuton按钮的编辑方法,在这里做个记录免得自己以后忘了,也为有需求的人指明一条道,代码比较乱,还请大家多多见谅,能实现就行啦,要求不高哟。

言归正传,需求如下图。

EasyUI在Panel上动态添加LinkButton按钮

看似简单,往panel的title中循环添加linkbutton标签不就得了,其实还有很多问题需要处理,简单描述一下我的思路和步骤。

1、panel的title属性接收类型为字符串类型,所以我想到了在后台获取数据后拼接成字符串然后为title赋值,

2、当我通过异步的方式获取到数据后想讲获取到的值取出来然后在另外的在后续的方法中使用时,发现获取不到数据;问题节点,异步;变更为同步获取数,问题解决;

3、将获取到的数据动态添加到panel的title中后,检查发现数据已经添加上去了,但是没有效果;问题点:渲染问题,解决方法,panel中只是定义<a>标签,不附加easyui效果,

单独添加easyui效果。ok,此时问题解决了。

好了看似简单其中包含了我在实现前大量的调试与检查操作,还请能够看到的高人可以的话,多给小弟写指点,不多说,Show Code Time

//页面加载时onload事件
$(function () {
 //开发方式为Asp.net MVC 利用访问页面获取访问控制器名称
 var controllerName = "@ViewContext.RouteData.Values["controller"].ToString().ToLower()";
 LoadDataAndColumnsName(controllerName);
 LoadButtonInfo(controllerName); 
 
 }) 

 var toolbar = []; 
 //获取标题数据
 function LoadDataAndColumnsName(cname) {
 $.ajax({
 type: "post",
 url: '/' + cname.toString() + '/GetCommand',
 contentType: "application/json;charset=utf-8",
 dataType: "json",
 async: false,
 success: function (data) {
  Callback(data);
 }, error: function (data) {
  alert("error");
 }
 })
 }
 //将回调函数中的数据放到Panel的title中
 function Callback(json) {
 var data = json;
 toolbar = data.toolbar;
 var buttons = "<span class='splitcss'>|</span><span class='desc'>Sim卡设置</span><span class='splitcss'>|</span>";
 $.each(data.toolbar, function (i, item) {
 buttons += "<a class='panel_" + item.btnName + "' id='" + item.btnName + "' style='margin-top:-5px;' onclick='OperAction(" + item.btnName + ");'></a>";
 })
 //加载Panel
 $("#contentDiv").panel({
 title: buttons,
 height: $(window).height()
 })
 }
 //在Panel的title属性中渲染linkbutton按钮
 function LoadButtonInfo(cname) {
 $.each(toolbar, function (i, item) {




//这样加载按钮的方案来自网络,找不到连接了,在此注明感谢下
 $("#contentDiv").panel('header').find('a.panel_' + item.btnName + '').linkbutton({
  iconCls: 'icon-' + item.btnIcon + '',
  text: item.btnCaption,
  plain: 'true'
 })
 $('#' + item.btnName + '').bind('click', function () {
  OperAction(item.btnName, cname);
 })
 })
 }

好了,这样应该就可以显示了,我这里是可以了,结实下OperAction函数是处理linkbutton点击时触发的函数去完成相应操作的。就到这里了,不喜勿喷,求高人简化指点。

Javascript 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
JS实现二维数组横纵列转置的方法
Apr 17 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 #Javascript
详解Node中导入模块require和import的区别
Aug 11 #Javascript
vue实现单选和多选功能
Aug 11 #Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 #Javascript
Angular模板表单校验方法详解
Aug 11 #Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 #Javascript
Vue 表单控件绑定的实现示例
Aug 11 #Javascript
You might like
Protoss热键控制
2020/03/14 星际争霸
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
django框架防止XSS注入的方法分析
2019/06/21 Python
python psutil监控进程实例
2019/12/17 Python
python通过cython加密代码
2020/12/11 Python
自我鉴定书范文
2013/10/02 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
HTML中的表单元素介绍
2022/02/28 HTML / CSS