EasyUI在Panel上动态添加LinkButton按钮

在最近做的一个将原来的旧系统翻新改造的项目中，为了在个别展示位置与原系统一直，研究了一下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 创建分割按钮的实现示例 # 好了 # 加载 # 还请 # 的人 # 我想 # 在这里 # 我在 # 在此 # 找不到 # 当我 # 就行 # 言归正传 # 不就 # 不高 # 做个 # 多说 # 就到 # 还有很多 # 解决方法 # 接了

返回目录在线咨询

上一篇：免费WAP自助建站系统：一键生成手机网站模板
下一篇：企业如何利用社交媒体进行推广_SEO优化教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

EasyUI在Panel上动态添加LinkButton按钮

您的项目需求