站长网_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: EasyUI在Panel上动态添加LinkButton按钮
搜索:
您的位置: 主页 > 教程 > 前端设计 > jQuery > » 正文

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()

最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -