如果您认为本站教程很有帮助，可以以鼓励翻译或写出更多高质量教程。
jQuery EasyUI 菜单与按钮 – 创建分割按钮
分割按钮（Split Button）包含一个链接按钮（Link Button）和一个菜单（Menu）。当用户点击或者鼠标悬停在向下箭头区域，将会显示一个对应的菜单。本实例演示了如何创建和使用分割按钮（Split Button）。
我们创建一个分割按钮（Split Button）和一个链接按钮（Link Button）：
&div style="border:1px solid #background:#padding:5width:120"&
&a href="#" class="easyui-splitbutton" menu="#mm" iconCls="icon-edit"&Edit&/a&
&a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-help"&&/a&
&div id="mm" style="width:150"&
&div iconCls="icon-undo"&Undo&/div&
&div iconCls="icon-redo"&Redo&/div&
&div class="menu-sep"&&/div&
&div&Cut&/div&
&div&Copy&/div&
&div&Paste&/div&
&div class="menu-sep"&&/div&
&span&Open&/span&
&div style="width:150"&
&div&Firefox&/div&
&div&Internet Explorer&/div&
&div class="menu-sep"&&/div&
&div&Select Program...&/div&
&div iconCls="icon-remove"&Delete&/div&
&div&Select All&/div&
现在已经定义好了一个分割按钮（Split Button），您不需要写任何的 javascript 代码。
您的邮件地址：
错误详细描述：
自强学堂为提供的内容仅用于学习，测试和培训。实例可能为了更容易理解而简化。我们一直对教程，参考手册，在线实例保持修订，但是我们不能保证所有内容全部正确。通过使用本站进行学习随之而来的风险与本站无关。当使用本站时，代表您已接受了本站的使用条款和隐私条款。自强学堂是以学习和分享知识为目的，对任何法律问题及风险不承担任何责任。版权所有，保留一切权利。
自强学堂是用
技术开发的站点，托管在平台
Copyright &
Powered by 自强学堂 All Rights Reserved.
JavaScript
Server Side
JavaScript
服务器相关
浏览器脚本
服务器脚本jQuery EasyUI 教程
jQuery EasyUI 菜单与按钮 - 创建菜单按钮（Menu Button）
菜单按钮（Menu Button）包含一个按钮（button）和一个菜单（menu）组件，当点击或移动鼠标到按钮上，将显示一个对应的菜单。
为了定义一个菜单按钮（Menu Button），您应该定义一个链接按钮（Link Button）和一个菜单（menu），下面是一个实例：
&div style="background:#padding:5width:200border:1px solid #ccc"&
&a href="#" class="easyui-menubutton" menu="#mm1" iconCls="icon-edit"&Edit&/a&
&a href="#" class="easyui-menubutton" menu="#mm2" iconCls="icon-help"&Help&/a&
&div id="mm1" style="width:150"&
&div iconCls="icon-undo"&Undo&/div&
&div iconCls="icon-redo"&Redo&/div&
&div class="menu-sep"&&/div&
&div&Cut&/div&
&div&Copy&/div&
&div&Paste&/div&
&div class="menu-sep"&&/div&
&div iconCls="icon-remove"&Delete&/div&
&div&Select All&/div&
&div id="mm2" style="width:100"&
&div&Help&/div&
&div&Update&/div&
&div&About&/div&
现在已经定义好了一个菜单按钮（Menu Button），您不需要写任何的 javascript 代码。之前写过一篇文章，地址& /Bond/p/3469798.html &&大概说了下怎么通过反射来自动生成对应EasyUi datagrid的模板，然后贴了很多代码，看起来很乱，当时没用过easyui，没啥经验。 这次经过了项目的实际考验，我把它做了一些改动，在此分享下，并且附上源码，源码需要用vs2012打开，打开即可运行不要做任何设置。源码地址在&/LittleBearBond/GenerateEasyUiDataGridTemplate&。都说现在程序员要玩GitHub，我一直都想用用，不过没时间，经过N久的加班，最近终于有时间学习了下，把源码也放到上面。我为什么要去折腾写这个东西，之前博客也大概提了下，现在请看下图，如果我们用easyui的datagrid来展示这样的数据页面必然对应这样一个datagrid模板&table id="dt" class="easyui-datagrid" data-options="title:'商品列表'"& 　　&thead& 　　　　&tr&　　　　　　&th data-options="field:'Name',align:'center',formatter:format.formatVal"& 名称&/th&　　　　　　&th data-options="field:'Category',align:'center',formatter:format.formatVal"& 类别&/th&　　　　　　&th data-options="field:'Price',align:'center',sortable:true,formatter:format.formatVal"& 价格&/th&　　　　　　&th data-options="field:'CreateTime',align:'center',formatter:format.formatTime" sortable="true"& 创建时间&/th&　　　　&/tr&　　&/thead&&/table&其实这个模板他要展示的数据对象必然对应一个后台的类，比如这个模板对应的后台类是Productpublic class Product
/// &summary&
/// &/summary&
public int Id { }
/// &summary&
/// &/summary&public string Name { }
/// &summary&
/// &/summary&public string Category { }
/// &summary&
/// &/summary&public decimal Price { }
/// &summary&
/// 创建时间
/// &/summary&public DateTime CreateTime { }　　}而从后台返回的数据是这样的通过以上观察我们会发现一些问题，datagrid要展示的数据后台必然是返回一个json对象，而单个对象里面的 Id 、CreateTime 、Name、 Price 其实是对应着Product实体对象的字段名，而datagrid模板里面要设置哪行显示哪个字段，比如Name 在datagrid模板里面对应着一行th，并设置Name这行的相关属性。datagrid模板里面每个字段都是和后台的Product实体对象的字段名称一一对应的，而我们每次在设置模板的时候都要去拷贝字段名称，如果不小心弄错了数据就不会显示出来。如果我们能通过后台的实体对象Product来直接生成这个模板那就不会出错了。这个功能我已经做好了，用到的知识点很少，只是自定义属性加反射再加点字符串拼接就搞定啦。不过生成模板也是有很多问题需要考虑，大致有以下一些问题需要解决。1：Product对象里面不是每个字段都要显示出来，比如Id不需要显示，我们希望能够动态设置需要显示的字段。2：在设置单行th的时候fileid是Name，但是在thead表头上需要显示 &名称& 两个汉字而不是英文的Name3：我们可以动态设置这个字段的data-options属性 &以及这行的其他属性 如style &class之类的4：显示有先后顺序，Name显示在前面还是Price显示在前面我们可以做动态设置5：可以额外添加和Product无关的字段，然后显示到页面上上面说在很抽象来看具体事例：现在我的类是这样的，标记了display属性，和DataOptions自定属性 [DataOptions(Options = "title:'商品列表'")]
public class Product
/// &summary&
/// &/summary&
public int Id { }
/// &summary&
/// &/summary&
[Display(Name = "名称")]
[DataOptions(Order = 1)]
public string Name { }
/// &summary&
/// &/summary&
[Display(Name = "类别")]
[DataOptions(Order = 2)]
public string Category { }
/// &summary&
/// &/summary&
[Display(Name = "价格")]
[DataOptions(Order = 3, Options = "sortable:true")]
public decimal Price { }
/// &summary&
/// 创建时间
/// &/summary&
[Display(Name = "创建时间")]
[DataOptions(Order = 4, Property = "sortable=true")]
public DateTime CreateTime { }现在我的cshtml页面代码是这样的@using GenerateDataGridDemo.EasyUi@using GenerateDataGridDemo.Extends@using GenerateDataGridDemo.Models@{
ViewBag.Title = "Test1";
Layout = "~/Views/Shared/_EasyUiLayout.cshtml";
var loadUrl = Url.Action("LoadTest1", "Home");}@section searchs{
@EasyUiPageControls.SearchTimeInput()
@EasyUiPageControls.SearchKeyWordInput("产品名称：", "KeyWord", "init=/"请输入产品名称/"")
@EasyUiPageControls.SearchButton()
&/p&}@Html.CreateDataGridTemplate(typeof(Product))@section scripts{
&script type="text/javascript"&
$(function () {
easyui.dg.LoadData('@loadUrl');
WebJs.SearchCreateTime();
$('#searchLoadList').click(function () {
easyui.dg.Search('@loadUrl');
&/script&}在页面上得到的效果就是以下这样的，经过简单封装cshtml的页面代码基本上就只有几行，就搞定了数据显示、加载、搜索。有时我们页面不会这么简单，我们的页面可能是这样的，前面有多复选框和后面的操作列。此时我还是用的以前的Product，只是页面代拿略有改变，如下@using GenerateDataGridDemo.EasyUi@using GenerateDataGridDemo.Extends@using GenerateDataGridDemo.Models@{
ViewBag.Title = "Test2";
Layout = "~/Views/Shared/_EasyUiLayout.cshtml";
var loadUrl = Url.Action("LoadTest1", "Home");}@section searchs{
@EasyUiPageControls.SearchTimeInput()
@EasyUiPageControls.SearchKeyWordInput("产品名称：", "KeyWord", "init=/"请输入产品名称/"")
@EasyUiPageControls.SearchButton()
&a class="easyui-linkbutton" id="GetAll"&获取选择的ID&/a&
var end = EasyUiPageHtml.FormateOperate();
var start = EasyUiPageHtml.FirstCheckBox();}@Html.CreateDataGridTemplate(typeof(Product), end, start)@section scripts{
&script type="text/javascript"&
function formatOperate(val, row) {
return '&a href="###" onclick="Modify(' + row.Id + ',/'' + row.Name + '/')"&编辑&/a&
function Modify(id, name) {
WebJs.Dialog.Alert(utils.str.formatString('Id:{0},Name{1}', id, name));
$(function () {
easyui.dg.LoadData('@loadUrl');
WebJs.SearchCreateTime();
$('#searchLoadList').click(function () {
easyui.dg.Search('@loadUrl');
$('#GetAll').on('click', function () {
var ids = easyui.dg.GetSelectionIds();
if (utils.str.isNullOrWhiteSpace(ids)) {
WebJs.Dialog.Tip('请先选择！');
WebJs.Dialog.Content(ids);
&/script&}大家会发现其实就多了end和start，其他其实是没变动的，只是曾加了一个GetALL按钮。真正用于生成面datagrid模板的代码只有@Html.CreateDataGridTemplate(typeof(Product)）这一行，然后加上Product上面标记的一些属性,就完成了datagrid模板的自动生成，具体实现上篇博客有说明，这次把代码抽取出来然后奉献给大家做个参考。demo代码是这样的，一切从简，只有一个程序集，页面只有两个页面，但是功能还是比较齐全的。&点击左边导航，就会添加一个页面，如果已经存在就刷新存在的页面，页面有右键菜单。扩展datagrid的view 在没有数据的时候显示提示信息对Jq这个日期控件做了点改动，起始日期级联验证页面搜索和加载数据做了相应封装，调用的时候只需一句话，在项目中做了很多公共方法的提取和封装，这里提出来的是部分，多了影响大家看这个代码&支持排序，只有价格和创建时间支持排序，支持单个字段排序，多个字段也是可以的，后台ExtendClass.cs有相关代码只是我没具体做这个功能。最后贴一下整个核心的代码，代码就一百多行，在项目源码中可以去看看，然后根据自己的需求去扩展和改进。public class GenerateDataGrid
public static IList&PropertyInfo& GetAllPropertyInfoList(Type entity)
return entity.GetProperties(BindingFlags.Public | BindingFlags.Instance | BindingFlags.IgnoreCase);
public static string GetDataGridTemplate(Type entity, string appendEnd, string appendStart)
var sb = new StringBuilder();
//先获取类的Attribute
var entityCustomAttr = entity.GetCustomAttributes(typeof(DataOptionsAttribute), false).FirstOrDefault() as DataOptionsA
#region 对实体的Attibute属性进行处理
//是否显示没有 标记dataoptions的字段
var isShowNotAttr =//默认不显示
var options = string.E
var tableId = string.E
var tableProperty = string.E
//并没有处理可能发生的异常情况， 比如在Property 指定了id="xxx"
而又指定了id的值
if (entityCustomAttr != null)
isShowNotAttr = entityCustomAttr.IsShowNotA
options = string.IsNullOrWhiteSpace(entityCustomAttr.Options) ? string.Empty : entityCustomAttr.O
//默认ID为dt ,
假设在Property 中没有设置了Id，如果设置了这里没做处理
tableId = string.IsNullOrWhiteSpace(entityCustomAttr.Id) ? "dt" : entityCustomAttr.Id;
tableProperty = string.IsNullOrWhiteSpace(entityCustomAttr.Property) ? string.Empty : entityCustomAttr.P
#endregion
//获取所有的Property
var properties = GetAllPropertyInfoList(entity);
//如果设置有不显示没有dataoptions标记的，值取出标记有dataoptions的字段
if (!isShowNotAttr)
properties = properties.Where(n =& n.CustomAttributes.Any(a =& a.AttributeType == typeof(DataOptionsAttribute))).ToList();
//没有打标记的也要取出来， 这里得到以字段name为key List&Attribute&为值的集合对象
Dictionary&string, List&Attribute&& colDicOpts = properties.ToDictionary(
property =& property.Name,
property =&
var list = new List&Attribute&
property.GetCustomAttributes(typeof (DataOptionsAttribute), false).FirstOrDefault() as DataOptionsAttribute,
property.GetCustomAttributes(typeof (DisplayAttribute), false).FirstOrDefault() as DisplayAttribute
//在table上拼接 id
data-options
和 Property
sb.AppendLine(string.Format("&table id=/"{0}/" class=/"easyui-datagrid/"
data-options=/"{1}/"
{2} & &thead& &tr&", tableId, options, tableProperty));
//没有直接遍历加入数据
这里先取得所有数据，然后进行排序，得到th 列表
var listThs = (from pro in properties
let custAttrs = colDicOpts.SingleOrDefault(n =& n.Key == pro.Name)
select AppenedTemplate(Template.DataGridTh, custAttrs, pro)).ToList();
//1、添加到开始部分的 add start
if (!string.IsNullOrWhiteSpace(appendStart)) { sb.AppendLine(appendStart); }
//2、添加中间部分，先排序，得到显示顺序 add center
listThs = listThs.OrderBy(n =& n.Key).Select(n =& n.Value).ToList();
sb.AppendLine(string.Join("", listThs));
//3、追加后面的字符串 add end
if (!string.IsNullOrWhiteSpace(appendEnd)) { sb.AppendLine(appendEnd); }
sb.AppendLine(@"&/tr&&/thead&&/table&");
return sb.ToString();
//dynamic 可用 KeyValuePair
private static dynamic AppenedTemplate(string template, KeyValuePair&string, List&Attribute&& attributes, PropertyInfo proinfo = null)
var displayName = attributes.Value.SingleOrDefault(n =& n is DisplayAttribute) as DisplayA
//设置字段显示的名称，直接设置 DisplayAttribute，这个大家肯定很熟悉的属性
var str = Template.RegV.Replace(template, displayName != null ? displayName.Name : attributes.Key);
//设置显示的字段field ，即是当前th显示哪个字段,例如field:'Id'
str = Template.RegF.Replace(str, attributes.Key);
//从该字段的CustomAttributes中取得DataOptionsAttribute
var dataOptions = attributes.Value.SingleOrDefault(n =& n is DataOptionsAttribute) as DataOptionsA
//设置Property， 如果property和data-options有设置相同的对象 这里没做异常处理
str = Template.RegP.Replace(str, dataOptions == null ? string.Empty : dataOptions.Property ?? "");
//没有设置排序的这里默认设置一个值
var order = dataOptions == null ? 100 : dataOptions.O
//由于我自己的需要，我要对DateTime类型进行特殊处理
if (proinfo != null && proinfo.PropertyType == typeof(DateTime))
//没有自定义属性的值
if (dataOptions == null)
//WebJs.Format.formatTime 自己的js时间格式化函数 这个一定程度上导致前后台耦合了
str = Template.RegD.Replace(str, "formatter:format.formatTime");//默认时间格式
str = dataOptions.Options != null && dataOptions.Options.IndexOf("formatter", StringComparison.CurrentCultureIgnoreCase) &= 0 ?
//已经设置formatter
Template.RegD.Replace(str, dataOptions.Options) :
//默认设置formatter
Template.RegD.Replace(str, ((dataOptions.Options ?? "").TrimEnd(',') + ",formatter:format.formatTime").TrimStart(','));
//替换data-option 的值, 如果为空就直接替换为空
if (dataOptions == null)
str = Template.RegDi.Replace(str, string.Empty);
var opt = (dataOptions.Options ?? "");
//默认设置起格式化
var replaceStr = opt.IndexOf("formatter", StringComparison.CurrentCultureIgnoreCase) &= 0 ? opt : opt.TrimEnd(',') + ",formatter:format.formatVal";
str = Template.RegD.Replace(str, replaceStr.TrimStart(','));
return new { Value = str, Key = order };
}&&PS：为了追逐爱情，准备离开成都，辞职北漂，忘大神收留。easyui有没有专门导出excel的按钮方法吧_百度贴吧
签到排名：今日本吧第个签到，
本吧因你更精彩，明天继续来努力！
本吧排名：
本吧签到人数：0
可签7级以上的吧50个
本月漏签0次！
成为超级会员，赠送8张补签卡
连续签到：天&&累计签到：天
超级会员单次开通12个月以上，赠送连续签到卡3张
亲爱的各位吧友：欢迎来到easyui有没有专门导出excel的按钮方法
发贴红色标题
签到六倍经验
兑换本吧会员
赠送补签卡1张，获得
助攻总额: 42W
猜球赢海信大奖
助攻总额: 38W
猜球赢海信大奖
助攻总额: 13W
猜球赢海信大奖
助攻总额: 18W
猜球赢海信大奖
助攻总额: 20W
猜球赢海信大奖
助攻总额: 6W
猜球赢海信大奖
助攻总额: 9W
猜球赢海信大奖
助攻总额: 6W
贴吧热议榜
使用签名档&专业的QQ下载站 本站非腾讯QQ官方网站
官方网址：
科发EasyUi代码生成器下载3.5 免费版
软件大小：1.5M
软件语言：中文
更新时间：
软件类别：免费/常用软件
软件性质：PC软件
软件厂商：
运行环境：WinAll
软件等级：
本类热门软件
软件简介软件截图相关软件相关文章
科发SQL代码生成器是一款生成标准的Transact-SQL语句的软件工具，可以生成数据表字段的添加，可以生成数据表数据的添加，自动识别主键、字段类型。功能介绍：1、可以生成数据表字段的添加、修改、删的SQL语句；2、可
更新：14-11-29&&大小：538KB&&类别：常用软件
评分：10.0
猛犸代码助手支持asp模版、VC++模版、PHP模版、C#模版和JACA模版代码生成，使用猛犸代码助可以自动生成上述五种模版，帮助快速开放制作程序。模版功能：1.asp模版ASP标准版，生成的项目已经完成对表格的添加记录、显
更新：14-10-23&&大小：22.4M&&类别：常用软件
评分：10.0
全屏轮播代码生成器淘宝美工快捷工具是专用于淘宝店铺装修的实用工具， 软件提供了店铺全屏轮播代码生成功能，支持旺铺专业版和基础版。全屏轮播代码生成器 v9.91更新内容：修复连接无法下载和注册码丢失问题
更新：14-05-27&&大小：6.0M&&类别：常用软件
VB/C#.Net代码生成工具在用于实际开发.Net数据库时，可以用来生成VB/C#实体代码，支持12中常见的数据库类型，用户也可以自行定义数据库，支持多种代码文件编码格式，采用插值法与最小二乘法曲线拟合，矩阵特征值及特
更新：14-05-05&&大小：9.6M&&类别：常用软件
评分：10.0
万通装修代码生成器是一款淘宝天猫店铺装修生成代码的工具，软件提供了天猫特效28种专业版特效58种基础版特效20种代码生成功能，淘宝卖家能够快速完成店铺装修，也可以为那些不会装修的用户提供最实际的帮助，是一款
更新：14-04-24&&大小：10KB&&类别：常用软件
[M][ftc=FFFFFF]^&去&、&终究&&成&[B][ffg,#CCFF7]&回忆&[/ft][/B]，深&藏&&心底。[/ft]
I&change&in&a&memory&at&
Flash地址:/uploadfiles/89.swf
Flash地址:http://222.240.184.29/17kwz-ctm/03/dmashd.swf
Flash地址:http://128qq./zuopin/fd12.swf
Flash地址:/free/flash/63.swf
代码生成器
代码生成器主要有两种，一种是专用于开发设计的代码生成工具，用于开发程序软件等，在编写代码时能够自动生成代码，节省程序员编写时间，而且还具有查找代码检查错误等作用，是程序员不可缺少的工具之一另一种则是我
本软件自动生成不同架构的项目和代码，使程序员可以节省大量机械录入的时间和重复劳动
阿里旺旺代码生成器在旺旺图标方面有两种风格可供用户选择，并支持生成html代码和ubb代
QQ在线客服代码生成工具绿色版 现在QQ在线客服在企业网站上很流行，也很实用.
三层架构代码生成器能够减少开发人员编写代码时的重复动作，这不仅加快了程序的开发速
科发SQL代码生成器是一款生成标准的Transact-SQL语句的软件工具，可以生成数据表字段的
代码生成机器人（C#代码生成）是基于sql数据库的c#代码生成，生成器可以作为sql企业管
科发EasyUi代码生成器下载 3.5 免费版
其他版本下载
代练通是一款多功能游戏代练接单管理软件，企业微信PC电脑Windows桌面版是腾讯公司推出驾考宝典下载，2013驾考宝典，超好用驾驶员FileZilla绿色版是一款知名的全平台开源免费智慧家庭记账软件能够快速记账、收支清晰、极速pdf阅读器是一款拥有闪电般速度的pdf阅千牛pc版是淘宝卖家工作平台，能随时随地聊Adobe AIR全名为Adobe Integrated Runtime，亲淘是由阿里旺旺推出的一款淘宝购物小助手百度输入法2.9正式版发布啦！新版本较之前有
本类月下载排行
12345678910