EasyUI在Panel上如何动态添加LinkButton按钮

这篇文章主要介绍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);
 })
 })
 }

以上是“EasyUI在Panel上如何动态添加LinkButton按钮”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！