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 相关文章推荐
jQuery操作input type=radio的实现代码
Jun 14 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
JS中自定义事件的使用与触发操作实例分析
Nov 01 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
php 代码优化之经典示例
2011/03/24 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
php批量删除操作代码分享
2017/02/26 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
新闻学专业个人求职信写作
2014/02/04 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
商场主管竞聘书
2014/03/31 职场文书
先进人物事迹材料
2014/12/29 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
Javascript的promise,async和await的区别详解
2022/03/24 Javascript