EasyUI在Panel上动态添加LinkButton按钮_网络技术_宿州市腾雀网络科技有限公司

EasyUI在Panel上动态添加LinkButton按钮

发布时间 - 2026-01-11 02:45:25 点击率：次

在最近做的一个将原来的旧系统翻新改造的项目中，为了在个别展示位置与原系统一直，研究了一下Easyui的panel面板，在panel的面板中动态添加Linkbuton按钮的编辑方法，在这里做个记录免得自己以后忘了，也为有需求的人指明一条道，代码比较乱，还请大家多多见谅，能实现就行啦，要求不高哟。

言归正传，需求如下图。

看似简单，往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点击时触发的函数去完成相应操作的。就到这里了，不喜勿喷，求高人简化指点。

# easyui # 动态添加按钮 # linkbutton按钮 # jQuery EasyUI菜单与按钮详解 # EasyUI的DataGrid每行数据添加操作按钮的实现代码 # Easyui Datagrid自定义按钮列(最后面的操作列) # jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍 # easyui datagrid 表格中操作栏按钮图标不显示的解决方法 # 轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮 # Easyui使用Dialog行内按钮布局的实例 # 给easyui的datebox控件添加清空按钮的实现方法 # Jquery Easyui分割按钮组件SplitButton使用详解（17） # jEasyUI 创建分割按钮的实现示例 # 好了 # 加载 # 还请 # 的人 # 我想 # 在这里 # 我在 # 在此 # 找不到 # 当我 # 就行 # 言归正传 # 不就 # 不高 # 做个 # 多说 # 就到 # 还有很多 # 解决方法 # 接了

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：网站建设真的困难吗？一探究竟

下一篇：Win11怎么设置屏幕常亮_Windows11电源和睡眠选项

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：网站建设真的困难吗？一探究竟

下一篇：Win11怎么设置屏幕常亮_Windows11电源和睡眠选项