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 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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
IStream与TStream之间的相互转换
2008/08/01 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
Js 随机数产生6位数字
2010/05/13 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
亿企通软件测试面试题
2012/04/10 面试题
水果超市创业计划书
2014/01/27 职场文书
小学数学教学反思
2014/02/02 职场文书
春节超市活动方案
2014/08/14 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
观后感格式
2015/06/19 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis