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 相关文章推荐
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
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
Zerg基本策略
2020/03/14 星际争霸
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
2018/12/11 jQuery
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
名片管理系统python版
2018/01/11 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
文明礼仪小标兵事迹
2014/01/12 职场文书
机关办公室岗位职责
2014/04/16 职场文书
企业2014年度工作总结
2014/12/10 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
雨中的树观后感
2015/06/03 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技