EasyUI设置工具栏和页脚

最新推荐文章于 2023-05-08 08:54:28 发布
最新推荐文章于 2023-05-08 08:54:28 发布
阅读量312 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41463944/article/details/106665477
版权 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>DataGrid Complex Toolbar - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>DataGrid Complex Toolbar</h2>
	<p>The DataGrid toolbar can be defined from a &lt;div&gt; markup, so you can define the layout of toolbar easily.</p>
	<div style="margin:20px 0;"></div>
	<table class="easyui-datagrid" title="DataGrid Complex Toolbar" style="width:700px;height:250px"
			data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get',toolbar:'#tb',footer:'#ft'">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:240">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="padding:2px 5px;">
		Date From: <input class="easyui-datebox" style="width:110px">
		To: <input class="easyui-datebox" style="width:110px">
		Language: 
		<select class="easyui-combobox" panelHeight="auto" style="width:100px">
			<option value="java">Java</option>
			<option value="c">C</option>
			<option value="basic">Basic</option>
			<option value="perl">Perl</option>
			<option value="python">Python</option>
		</select>
		<a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
	</div>
	<div id="ft" style="padding:2px 5px;">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"></a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true"></a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"></a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"></a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"></a>
	</div>
</body>
</html>
程序员阿明
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
10-21
主要介绍了jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法,涉及jQuery插件EasyUI相关属性设置技巧,需要的朋友可以参考下
EasyUI Combobox设置默认值 获取text的方法
09-01
总结起来，EasyUI Combobox提供了便捷的方式来设置默认值和获取选中项的text，这对于构建交互式界面非常有用。通过`setValue`或`selectedIndex`设置默认值，`getValue`和`getText`获取选中项的信息，开发者可以轻松...
EasyUI页脚行显示
weixin_41463944的博客
06-10 257
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Footer Rows in DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="styl
vue 页脚_EasyUI 页脚行(Footer Rows)_Vue EasyUI Demo
weixin_39581995的博客
12-19 185
源代码Footer Rows:data="data" :footerData="footerData" :showFooter="true" idField="id" treeField="region">export default {data() {return {data: null,footerData: null};},created() {let d = this.getData...
easyui自定义工具栏
都是浮云
10-06 4334
查询
easyui-dialog 工具栏定义
weixin_38637161的博客
07-05 358
你可以创建一个dialog 和toolbar和button,创建可以从HTML 标记,这个教程描述如何添加toolbar 和 button到dialog,没有任何的javascript代码.创建 Dialog&lt;div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;padding:...
EasyUI-工具栏提示
dxm809的博客
03-22 313
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
easyui和mvc
06-09
【标题】"easyui和mvc"涉及的知识点主要集中在Web前端框架EasyUI和后端的MVC（Model-View-Controller）设计模式上。EasyUI是基于jQuery的一个轻量级的前端开发框架，而MVC则是一种软件设计模式，常用于构建可维护性...
easyui右键设置疑问
01-21
你可以通过创建一个 `<div>` 元素并设置 `class="easyui-menu"` 创建菜单，然后在其中添加 `<div>` 子元素作为菜单项，每个子元素可以通过设置 `data-icon` 添加图标，`data-handler` 指定点击后的回调函数。...
easyUI工具
05-11
在这个"easyUI工具"压缩包中，很可能包含了EasyUI的核心库文件、示例代码、文档和其他相关资源，方便用户学习和使用。 EasyUI 的核心特性包括： 1. **组件丰富**：EasyUI 提供了诸如窗口（Window）、表格（Grid）...
jQuery EasyUI 窗口 - 自定义窗口工具栏
unber的博客
05-08 162
如需自定义工具，设置该工具为 true 或者 false。比如我们希望定义一个窗口（window），仅仅拥有一个可关闭的工具。您应该设置任何其他工具为 false。我们可以在标记中或者通过 jQuery 代码定义 tools 属性。默认情况下，窗口（window）有四个工具：collapsible、minimizable、maximizable 和 closable。如果我们希望添加自定义的工具到窗口（window），我们可以使用 tools 属性。
38EasyUI 数据网格- 创建页脚摘要
阿甘兄
04-17 315
在本教程中，我们将向您展示如何在数据网格（datagrid）页脚显示摘要信息行。 为了显示页脚行，您应该设置 showFooter 属性为 true，然后准备定义在数据网格（datagrid）数据中的页脚行。以下是示例数据： {"total":1,"rows":[{"id":1,"name":"Chai","price":18.00}],"footer":[{"name":"Total",...
EasyUI-数据表格复杂工具栏
dxm809的博客
03-28 474
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scri...
easyui-datagrid页脚添加合计
qq_45529798的博客
09-02 909
效果： 一. 先在datagrid添加showFooter的属性，和加载成功时间onLoadSuccess $('#aa').datagrid({ idField:'id', remoteSort:true, pagination:true, showFooter: true, ctrlSelect: true, columns:[[ {field:'name',titl
jQuery EasyUI使用教程之在数据网格的页脚中显示摘要信息
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
03-31 777
jQuery EasyUI最新试用版免费下载> 在本教程中，我们将为您展示如何在数据网格的页脚中显示摘要信息行。 查看jQuery EasyUI演示 想要显示页脚行，您应该将showFooter属性设置为true，然后准备定义在数据网格数据中的页脚行。以下是示例数据： {"total":1,"rows":[{"id":1,"name":"Chai","price":
easyui Datagrid 加入 add， cut， save工具栏
学习专栏
11-25 5333
var toolbar = [{         text: 'Add',         iconCls: 'icon-add',         handler: function () { alert('add') }     }, {         text: 'Cut',         iconCls: 'icon-cut',         handler: func
jQuery EasyUI 数据网格 - 创建复杂工具栏
unber的博客
04-26 143
数据网格（datagrid）的工具栏（toolbar）可以包含按钮及其他组件。您可以通个一个已存在的 DIV 标签来简单地定义工具栏布局，该 DIV 标签将成为数据网格（datagrid）工具栏的内容。本教程将向您展示如何创建数据网格（datagrid）组件的复杂工具栏。正如您所看到的，数据网格（datagrid）的工具栏域对话框（dialog）相似。我们不需要写任何的 javascript 代码，就能创建带有复杂工具栏的数据网格（datagrid）。创建数据网格（DataGrid）
easyUi-datagrid 真分页 + 工具栏添加控件
weixin_30549657的博客
06-14 171
1、 新建Pager.js /** * * @param {any} el 元素 */ function showDataGrid1(el) { $(el).datagrid({ title: '分页的gridview', url: '/Home/GetPagerUserInfo', //一个用以从远程站...
EasyUI在form上显示工具栏的效果
Shelter
04-27 655
EasyUI中，有时我们需要在form表单上显示类似于dialog上显示工具栏的效果，我们可以这样做： &lt;div id="formToolBar" toolbar="#toolbar" fit="true"&gt; &lt;div id="toolbar" class="datagrid-toolbar"&gt; &lt;a href
easyui左侧导航栏
最新发布
07-29
上述代码中，我们使用`<div class="easyui-accordion">`来创建Accordion组件，并设置了宽度和高度。 每个菜单项都是一个`<div>`元素，通过设置`title`属性来定义菜单项的标题，通过设置`iconCls`属性来定义菜单项的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员阿明

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值