data-options

easyUI的formatter使用

由 怎甘沉沦 提交于 2020-03-29 07:26:37
<table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true"> <thead> <tr> <th data-options="field:'code',width:100">编码</th> <th data-options="field:'name',width:100">名称</th> <th data-options="field:'price',width:100,align:'right'">价格</th> </tr> </thead> </table> 比如我对名称这一栏需要格式设置 <table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true"> <thead> <tr> <th data-options="field:'code',width:100">编码</th> <th data-options="field:'name',width:100

EasyUI Layout 布局_摘

由 匆匆过客 提交于 2020-03-11 11:47:24
EasyUI Layout 布局 通过 $.fn.layout.defaults 重写默认的 defaults。 布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。 创建布局（Layout） 1、通过标记创建布局（Layout）。 添加 'easyui-layout' class 到 <div> 标记。 <div id="cc" class="easyui-layout" style="width:600px;height:400px;"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> <div data-options="region:'east',title:'East',split:true"

easyui datagrid 工具栏实现方式

由 核能气质少年 提交于 2020-03-03 14:36:17
在使用datagrid时，工具栏有时需要动态控制或添加一些自定义的内容进去，这里把用到的总结一下。 第一种：先定义，后追加 前四个按钮使用datagrid的属性方式添加： toolbar: [ { text: '增加', iconCls: 'icon-add', handler: function () { deviceInfoAddClick(); } }, { text: '修改', iconCls: 'icon-edit', handler: function () { deviceInfoEditClick(); } }, { text: '删除', iconCls: 'icon-remove', handler: function () { deviceInfoDeleteClick(); } }, { text: '查看', handler: function () { } }, '-', { text: '刷新', iconCls: 'icon-reload', handler: function () { deviceInfoRefreshClick(); } }, { text: '导出', iconCls: 'icon-save', handler: function () { $(dg).treegrid('reload'); } }, '-'],

easyui datagrid数据编辑

由 我的梦境 提交于 2020-02-29 08:53:49
以下为官方数据,不需要其他文件即可实现编辑数据 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Row Editing in DataGrid - 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>Row Editing in DataGrid</h2> <p>Click the row to start editing.</p> <div style="margin:20px 0;">

easyui LinkButton

由 99封情书 提交于 2020-02-14 22:30:11
http://www.zi-han.net/case/easyui/menu&button.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>LinkButton - 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-1.8.0.min.js"></script> <script type="text/javascript" src="../jquery.easyui.min.js"></script> <style> .toolbar{ height:30px; padding:5px; } </style> <script>

【开源】OSharp框架解说系列（2.1）：EasyUI的后台界面搭建及极致重构

由 落花浮王杯 提交于 2019-12-31 23:22:29
OSharp是什么？ 　　OSharp是个快速开发框架，但不是一个大而全的包罗万象的框架，严格的说，OSharp中什么都没有实现。与其他大而全的框架最大的不同点，就是OSharp只做抽象封装，不做实现。依赖注入、ORM、对象映射、日志、缓存等等功能，都只定义了一套最基础最通用的抽象封装，提供了一套统一的API、约定与规则，并定义了部分执行流程，主要是让项目在一定的规范下进行开发。所有的功能实现端，都是通过现有的成熟的第三方组件来实现的，除了EntityFramework之外，所有的第三方实现都可以轻松的替换成另一种第三方实现，OSharp框架正是要起隔离作用，保证这种变更不会对业务代码造成影响，使用统一的API来进行业务实现，解除与第三方实现的耦合，保持业务代码的规范与稳定。 本文已同步到系列目录： OSharp快速开发框架解说系列 前言 　　要了解一个东西长什么样，至少得让我们能看到，才能提出针对性的见解。所以，为了言之有物，而不是凭空漫谈，我们先从UI说起，后台管理页面的UI我们将使用应用比较普遍的easyui框架。 　　以前在用easyui的时候，每个页面都得从0做起，或者不厌其烦地由以前的页面通过“复制-粘贴”的方式来修改，久页久之，就会造成页面庞大且难以维护。其实，前端的html,javascript代码与后端的代码是一样的，通过一定的组织，把重复的代码抽离出来

考勤系统代码分析——主页布局easyui框架

由 北慕城南 提交于 2019-12-21 07:13:58
考勤系统主页的布局用的是easyui的Layout控件 Layout:布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。 <div id="cc" class="easyui-layout" style="width:600px;height:400px;"> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div

EasyUi 表格自适应宽度

由 寵の児 提交于 2019-12-03 15:27:05
第一次接触EasyUi想要实现表格宽度自适应，网上找了好多文章，都没有实现，有网友实现了可是自己看不懂。可能是太简单高手都懒得分享，现在把自己的理解和实现记录一下，希望可以帮到向自己一样的菜鸟，步骤如下： 第一步，把table标签的属性“fitColumns”设置为“true” 第二步，经过第一步的设置后，此时给标题的td设置width属性，width的值此时设置为数字代表的就是宽度按百分比来设置，例如width:10，表示宽度为10% 代码如下： <table class="easyui-datagrid" style="width:100%;" data-options="singleSelect:true,collapsible:true,url:'demo/datagrid/datagrid_data1.json',method:'get',fitColumns:true"> <thead> <tr> <th data-options="field:'itemid',width:10">Item ID</th> <th data-options="field:'productid',width:20">Product</th> <th data-options="field:'listprice',width:10,align:'right'">List Price</th

easyui input输入框的限制和校验条件

由 匿名 (未验证) 提交于 2019-12-02 23:34:01
添加提示信息:data-options="prompt:'Enter something here...'" 校验手机号： data-options="validType:'mobile'" 允许输入多行文字：data-options="multiline:true" 单选下拉框：class="easyui-combobox" 多选下拉框：class="easyui-combobox" 的基础上 输入长度：data-options="validType:'length[4,12]'" 最大输入长度：data-options="validType:['maxLength[100]']" 为文本框添加搜索按钮以及搜索图标：data-options="buttonText:'Search',buttonIcon:'icon-search'"

javaWeb核心技术第十四篇之easyui

由 匿名 (未验证) 提交于 2019-12-02 21:53:52
网站是分为网站的前台和网站的后台. 前台--给用户看的 例如:商城 后台--给管理员看的 例如:商城后台 目的:用来添加维护数据 BootStrap:jsp 页面显示,效果好,美观,适合作为用户界面. EasyUI : jsp页面,快速开发,格式统一,美观效果一般. EasyUI里面有很多组件(功能模块):有自己的特使,但编写简单,只需固定html代码结构. EasyUI环境搭建: 1.导入css , 需要2个css 2.导入jquery,需要2个js <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/icon.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/demo.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min
订阅 data-options