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 变量作用域分析
Jul 04 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
详解javascript设计模式三:代理模式
Mar 25 Javascript
vue.js实现备忘录demo
Jun 26 Javascript
浅谈vue中resetFields()使用注意事项
Aug 12 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
php adodb介绍
2009/03/19 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
jquery的$().each和$.each的区别
2019/01/18 jQuery
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
python主要用于哪些方向
2020/07/05 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
中专自我鉴定范文
2013/10/16 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
货车司机岗位职责
2014/03/18 职场文书
爱国主义演讲稿
2014/05/07 职场文书
学困生转化工作总结
2015/08/13 职场文书