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插件实现图片延迟加载技术详细说明
Mar 12 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
对Python实现累加函数的方法详解
2019/01/23 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
学生会竞聘书范文
2014/03/31 职场文书
团日活动总结报告
2014/06/25 职场文书
合同纠纷调解书
2015/05/20 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫