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 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
javascript的内存管理详解
Aug 07 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
python实现图片横向和纵向拼接
2020/03/05 Python
Python日志处理模块logging用法解析
2020/05/19 Python
python程序需要编译吗
2020/06/19 Python
python如何导入依赖包
2020/07/13 Python
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
开办饭店创业计划书
2013/12/28 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
家长会后的感想
2015/08/11 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
opencv 分类白天与夜景视频的方法
2021/06/05 Python
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js