easyui合成的html按钮没有,EasyUI在Panel上动态添加LinkButton按钮

本文介绍如何在EasyUI的Panel标题栏中动态添加LinkButton,并解决异步数据加载和渲染问题。通过实例演示了从获取数据到按钮功能实现的全过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

言归正传,需求如下图。

1e257470d4dca50bef45392c14632753.png

看似简单,往panel的title中循环添加linkbutton标签不就得了,其实还有很多问题需要处理,简单描述一下我的思路和步骤。

1、panel的title属性接收类型为字符串类型,所以我想到了在后台获取数据后拼接成字符串然后为title赋值,

2、当我通过异步的方式获取到数据后想讲获取到的值取出来然后在另外的在后续的方法中使用时,发现获取不到数据;问题节点,异步;变更为同步获取数,问题解决;

3、将获取到的数据动态添加到panel的title中后,检查发现数据已经添加上去了,但是没有效果;问题点:渲染问题,解决方法,panel中只是定义标签,不附加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 = "|Sim卡设置|";

$.each(data.toolbar, function (i, item) {

buttons += "";

})

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值