EasyUI在Panel上动态添加LinkButton按钮

2024-10-13 22:53:14

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

轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮

一.EasyUI创建简单的菜单菜单(Menu)定义在一些 DIV 标记中,如下所示: <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="javascript:alert('new')">New</div> <div> <span>Open</span> <div
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍

扩展自 $.fn.linkbutton.defaults.用 $.fn.menubutton.defaults 重写了defaults. 依赖 menu linkbutton 用法复制代码代码如下: <a href="javascript:void(0)" id="mb" iconCls="icon-edit">Edit</a> <div id="mm" style="width:1
jQuery EasyUI菜单与按钮详解

EasyUI 简介 easyui是一种基于jQuery的用户界面插件集合. easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 代码如下: <html> <head> <meta http-equiv="Content
Jquery Easyui分割按钮组件SplitButton使用详解（17）

SpliButton组件依赖于Menu(菜单)组件和 LinkButton(按钮)组件加载方式 Class加载 <a href="javascript:void(0)" id="edit" class="easyui-splitbutton" data-options="menu:'#box',iconCls:'icon-edit'">编辑</a> <div id="box"
给easyui的datebox控件添加清空按钮的实现方法

在不改源码的前提下给datebox添加清空按钮 var buttons = $.extend([], $.fn.datebox.defaults.buttons); buttons.splice(1, 0, { text: '清空', handler : function(target) { $(target).combo("setValue", "").combo("setText", ""); // 设置空值 $(targ
EasyUI在Panel上动态添加LinkButton按钮

在最近做的一个将原来的旧系统翻新改造的项目中,为了在个别展示位置与原系统一直,研究了一下Easyui的panel面板,在panel的面板中动态添加Linkbuton按钮的编辑方法,在这里做个记录免得自己以后忘了,也为有需求的人指明一条道,代码比较乱,还请大家多多见谅,能实现就行啦,要求不高哟. 言归正传,需求如下图. 看似简单,往panel的title中循环添加linkbutton标签不就得了,其实还有很多问题需要处理,简单描述一下我的思路和步骤. 1.panel的title属性接收类型为字符串
揭秘在ListView等AdapterView上动态添加删除项的陷阱

如何避开在ListView等AdapterView上动态添加删除项的陷阱,下面就为大家分享,具体内容如下首先,定义如下array资源,作为列表的加载内容: <resources> <string name="app_name">MyListView</string> <string-array name="language"> <item>Java</item> <item>C&l
在Vue组件上动态添加和删除属性方法

如下所示: 在组件上添加属性 this.$set(this.data,"obj",value'); 删除属性this.$delete(this.data,"obj",value'); 以上这篇在Vue组件上动态添加和删除属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js动态添加.删除选题的实例代码详解Vue 动态添加模板的几种方法
jQuery Easyui学习之datagrid 动态添加、移除editor

使用easyui行编辑的时候完成编辑的功能比较简单,但是如果要根据一个框的值动态改变别的值或者编辑的时候禁用某个框的时候就比较麻烦了. 比如像下面这样:添加行的时候每个值都是手动输入,修改的时候第一个值不能修改.我们来看下怎么实现这样的效果. easyui本身是不提供这么细节的功能的,需要我们自己拓展下: 在编辑的时候移除第一列的editor属性,添加的时候,添加第一列的属性. //扩展datagrid:动态添加删除editor $.extend($.fn.datagrid.methods, {
vue 实现在同一界面实现组件的动态添加和删除功能

1.插入静态组件,将自己想要循环的组件显示在页面上,利用v-for进行循环操作,操作包括增删. //所有要显示的子组件,写在一个li标签,有 v-for循环. <li v-for="(item, index) in questionList" v-bind:key="index"> <el-row :gutter="20"> <el-col offset="2
JS简单实现动态添加HTML标记的方法示例

本文实例讲述了JS简单实现动态添加HTML标记的方法.分享给大家供大家参考,具体如下: 一介绍动态添加一个HTML标记可以使用createElement()方法来实现. CreateElement()方法可以根据一个指定的类型来创建一个HTML标记. 语法: sElement=document.createElement(sName) sElement:用来接收该方法返回的一个对象. sName:用来设置HTML标记的类型和基本属性. 二应用动态添加一个文本框本示例通过单击"动态添加文
jQuery动态添加li标签并添加属性和绑定事件方法

代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q
jQuery EasyUI 布局之动态添加tabs标签页

在没看下文之前先给大家简单介绍easyui相关知识. easyui是一种基于jQuery的用户界面插件集合.ddd easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用
Android开发中button按钮的使用及动态添加组件方法示例

本文实例讲述了Android开发中button按钮的使用及动态添加组件方法.分享给大家供大家参考,具体如下: MainActivity.java package com.example.lab2; import android.os.Bundle; import android.app.Activity; import android.content.Context; import android.view.Menu; import android.view.View; import andro

EasyUI在Panel上动态添加LinkButton按钮

相关推荐

随机推荐