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异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
JavaScript实现简单的弹窗效果
May 19 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&amp;mysql(六)
2006/10/09 PHP
PHP 采集心得技巧
2009/05/15 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
padas 生成excel 增加sheet表的实例
2018/12/11 Python
python实现控制台打印的方法
2019/01/12 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
元旦寄语大全
2014/04/10 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2015年售票员工作总结
2015/04/29 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
小学见习报告
2015/06/23 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS