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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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
深入PHP变量存储的详解
2013/06/13 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
php简单的上传类分享
2016/05/15 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
python验证码识别的实例详解
2016/09/09 Python
python脚本爬取字体文件的实现方法
2017/04/29 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
Python插件机制实现详解
2020/05/04 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
详解python UDP 编程
2020/08/24 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
应届毕业生个人求职自荐信
2014/01/06 职场文书
骨干教师考核方案
2014/05/09 职场文书
见习报告格式范文
2014/11/08 职场文书
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android