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 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
js中小数转换整数的方法
Jan 26 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 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
第五节 克隆 [5]
2006/10/09 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
vue-cli和v-charts实现可视化图表过程解析
2019/10/08 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
简单的编程0基础下Python入门指引
2015/04/01 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python图算法实例分析
2016/08/13 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
某同学的自我鉴定范文
2013/12/26 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
国际金融专业自荐信
2014/07/05 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
店铺转让协议书
2014/12/02 职场文书
2015年父亲节寄语
2015/03/23 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
我的中国梦主题班会
2015/08/14 职场文书
Python基础之元编程知识总结
2021/05/23 Python