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 相关文章推荐
如何将网页表格内容导入excel
Feb 18 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
深入理解Node module模块
Mar 26 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
vue cli4.0项目引入typescript的方法
Jul 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
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
python能自学吗
2020/06/18 Python
Python 爬虫的原理
2020/07/30 Python
利用python绘制正态分布曲线
2021/01/04 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
eBay奥地利站:eBay.at
2019/07/24 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
美发活动策划书
2014/01/14 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
小学校本培训方案
2014/06/06 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
2014年城管工作总结
2014/11/20 职场文书
环保建议书作文300字
2015/09/14 职场文书
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript