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中的过滤操作详细解析
Dec 02 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
JS出现失效的情况总结
Jan 20 Javascript
Vue精简版风格概述
Jan 30 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 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中的比较运算符详解
2013/10/28 PHP
php实现的CSS更新类实例
2014/09/22 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
解析Python中的异常处理
2015/04/28 Python
Python输出9*9乘法表的方法
2015/05/25 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
wxPython之解决闪烁的问题
2018/01/15 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
车间副主任岗位职责
2013/12/24 职场文书
三年级语文教学反思
2014/02/01 职场文书
班级出游活动计划书
2014/08/15 职场文书
开幕式邀请函
2015/01/31 职场文书
上班迟到检讨书
2015/05/06 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书