EasyUI在Panel上动态添加LinkButton按钮

时间:2020-05-16 已无灵感人气:0

在最近做的一个将原来的旧系统翻新改造的项目中，为了在个别展示位置与原系统一直，研究了一下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点击时触发的函数去完成相应操作的。就到这里了，不喜勿喷，求高人简化指点。

加载全部内容