easyui学习笔记1-（datagrid+dialog）

easyUI学习笔记一

1.引用js文件 <script type="text/javascript" src = jquery-easyui/jquery.min.js> </script> <script type="text/javascript" src = jquery-easyui/jquery.easyui.min.js> </script> <script type="text/javascript"…

easyUI学习笔记二

1．拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <script type="text/javascript" src = jquery-easyui/jquery.min.js> </script> <script type="text/javascript" src = jquery-easyui/…

jQuery EasyUI是一组基于jQuery的UI插件集合体.我的理解:jquery是js的插件,easyui是基于jquery的插件.用easyui可以很轻松的打造出功能丰富并且美观的UI界面. 这两天主要接触了easyui的datagrid组件和dialog组件. easyui的组件都有属性,事件,方法. 先以这几天用到的datagrid组件来讲,后台的php根据条件查出数据,echo json_encode($list) 将数据以json格式传给前台. 前台html根据name从jso…

EasyUI学习笔记---Datagrid真分页

EasyUI Datagrid组件在我看来功能还是很强大的,在我使用过程中遇到分页请求的问题困扰了一天才解决,下面我就把我遇到的问题分享一下 //datagrid数据表格渲染 $("#dg").datagrid({ loader: function(param, success, error) { var pageNumber = param.page; var pageSize = param.rows; $.ajax({ type: "get", url: ur…

EasyUI学习笔记（四）—— datagrid的使用

一.传统的HTML表格之前我们做表格的时候是这样写的: <table > <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>小明</td> <td>90&…

easyui学习笔记1—增删改操作

最近公司要用easyui,这里自己看了官网几篇文章,遇到些问题,大多数的问题都是敲代码的时候笔误,其他有些地方确实需要注意一下,这里做些笔记. 1.在mysql中建好表之后修改id字段为递增字段,发现这个奇怪的mysql语法,如下 alter table student change id id int auto_increment; 这句是在student表已经建好的情况下来修改字段id为自增列,奇怪的是为嘛change id id,并且后面还要带上id的类型int? 2.html5标记如何…

easyUi 学习笔记（二）使用tabs 里datagridview 发送ajax请求不访问后台的问题

这个BUG 我花了一个半小时, 还是看不出哪里的问题, 于是就百度到这么一段话,我需要记住 <======================================================================================================================> 使用tabs标签, 本身这个标签就在一个html里面, easyui中加载外部界面的组件,例如:panel,window,dailog,tabs等.请确保你引入的…

JQuery EasyUI学习笔记

转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6690888.html 简介与准备 jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件. 准备:下载:http://www.jeasyui.com/download/index.php 导入: <link rel="stylesheet" type="text/css" href="easyui/themes/default/e…

easyui学习笔记2—在行内进行表格的增删改操作

第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和css代码 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href=&quo…

easyui学习笔记8—在手风琴中加载其他的页面

在手风琴中加载其他页面和在表格中加载其他的页面有写类似的,就是请求另外一个页面显示数据. 1.先看看引用的资源文件 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" /&g…

easyui学习笔记7—在手风琴中显示表格

在这一篇中我们看看如何在手风琴里面显示表格数据的. 1.先看看引用的资源 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="jquery-easyui-…

easyui学习笔记3—在展开行内的增删改操作

这一篇介绍在一个展开行内进行的增删操作,如果一行很长有很多的数据,在一个展开行内进行编辑将更加方便. 1.先看引用的资源 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css"…

EasyUI 学习笔记

EasyUI常见错误 1 . 无论是用HMTL形式实现组件还是使用代码 + HTML 形式实现组件 , 在为组件设置属性时 , 要注意属性值的类型问题 string:必须加引号 number:不加任何单位,不加引号 boolean:不加引号代码+HTML形式实现组件 , 最后的属性之后没有事件 , 最后的属性之后不要加逗号例如: $(“#rr”).cmpName({k1:v1,k2:v2}) v2之后不可以有逗号 2 . 在调用组件提供的方法时 , 注意调用方法的格式问题 $(“#rr”).…

EasyUI学习笔记（一）EasyUI入门

一.EasyUI下载 EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jquery-easyui-1.7.2 解压后得到如下文件夹: 二.EasyUI入门案例第一步:新建一个JavaWeb工程,然后将jquery-easyui-1.7.2加入到工程中,将jquery-easyui-1.7.2文件夹中一些不必要的文件删掉,只保留必要的就可以了,如下图所示: 第二步:新建一个demo1.jsp,在demo1.jsp中使…

easyUI学习笔记之tab组件的鼠标事件

一.鼠标经过组件后的事件,自动打开选项卡内容 var tabs = $('#tt').tabs().tabs('tabs'); for(var i=0; i<tabs.length; i++){ tabs[i].panel('options').tab.unbind().bind('mouseenter',{index:i},function(e){ $('#tt').tabs('select', e.data.index); }); } 其中“tt”是选项卡的ID名. 二datagrid 里面…

EasyUI学习笔记之panel

<easyUI panel 属性:>  <id="tt",这个标签内的内容被当做tool属性的值,做了添加和编辑的JS操作事件> <div class="easyui-panel" style="width:300px;height:200px"…

easyui学习笔记14-拓展的基本验证规则

/** * 扩展的基本校验规则, */ $.extend($.fn.validatebox.defaults.rules, { minLength : { // 判断最小长度 validator : function(value, param) { value = $.trim(value); //去空格 return value.length >= param[0]; }, message : '最少输入 {0} 个字符.' }, length:{validator:function(valu…

easyui学习笔记10—手风琴格子始终展开和多个格子展开

始终打开有时候可能会很管用,其实就是一个设置问题.这里就不再介绍引用的资源了,这里只看看html是怎么写的. 1.html代码 <body> <h2>Basic Accordion</h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>Click on panel header to show…

easyui学习笔记12—tab标签页的添加和删除

这一篇我们来看看标签页的添加和删除动作.我在想看这些例子还不如看文档,文档的内容更加全面,但是文档全部是理论没有实际的操作,看起来很枯燥,文档只能是遇到问题的时候查.easyui的文档写的还是很详细的,这点对开发者很重要. 1.html代码 <div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:aut…

easyui学习笔记11—tab标签页和鼠标动作

这篇我们看看标签页是怎么实现的,默认情况下要靠点击切换标签,也可以用鼠标切换标签选项,就是鼠标放在标签上切换. 首先看看引用的资源文件 1.资源文件 <head> <meta charset="UTF-8" /> <title>Basic Tabs - jQuery EasyUI Demo</title> <link rel="stylesheet" href="jquery-easyui-1.3.5/…

easyui学习笔记9—手风琴格子的增，删和选择

这一篇中我们将看看如何给手风琴动态的增加,删除格子,怎样选择某一个格子的. 1.先看看引用的资源 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" /> <li…

easyui学习笔记6—基本的Accordion(手风琴)

手风琴也是web页面中常见的一个控件,常常用在网站后台管理中,这里我们看看easyui中基本的手风琴设置. 1.先看看引用的资源 <meta charset="UTF-8" /> <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href=&qu…

easyui学习笔记5—panel加载其他的页面

上一篇中我们看到了panel的基本实现,没有什么难度,最重要的是data-options和class两个标签属性的定义.这里我们将看一下在panel中如何加载其他的页面. 1.先看看引用的资源文件和html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Load Panel Content - jQuery EasyUI Demo</title&…

easyui学习笔记4—panel的实现

这篇看看easyui是怎么实现panel的,就是类似一个容器,里面可以装具体内容或者其他的easyui控件. 1.这里先看看引用的资源文件 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" type="text/cs…

EasyUI学习笔记（二）—— Layout

一.layout页面布局 EasyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必须的,而东.西.南.北这四个面板是可选的,如果布局里面不需要东.西.南.北这四个面板,那么可以把相应的div删掉,另外,如果需要创建复杂的easyUI布局,那么可以通过嵌套东.西.南.北.中五个面板来实现.下面简单演示一下EasyUI布局. 1.1 通过div创建easyUI布局 <%@ page contentType="text/html;charset=UTF-8" languag…

easyUi 学习笔记（一）使用easyui 和ztree 创建前端框架

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/common/page.jsp" %> // 这里是引用的公共代码 ,主要是css和js jstl 的引用 easyui核心js都在里面 <!DOCTYPE html PUBLIC &qu…

DevExtreme学习笔记(一) DataGrid中数据筛选

config.filterRow = { visible: true, applyFilter: "auto" }; config.headerFilter = { visible: true }; 或者 var dataGrid = $("#gridContainer").dxDataGrid({ dataSource: orders, columnsAutoWidth: true, showBorders: true, filterRow: { visible:…

DevExtreme学习笔记(一) DataGrid中MVC分析

@(Html.DevExtreme().DataGrid() .ID("gridContainer") .DataSource(d => d .OData() .Url("https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes") .BeforeSend(@<text> function(request) { request.params.startDate = "20…

EasyUI学习笔记

1,tabs获得被选中的标题 var tabTitle = $('#tabs').tabs('getSelected').panel('options').title;//获得被选中的标题 2.当设置checkbox时用attr设置是否选中时,第一次能选中,但是第二次就无法被选中了,那么就用prop if (date.valid) { $("#Uvalid").prop("checked", true); } else { $("#Uvalid"…

EasyUI学习笔记(1)----Tree控件实现过程中.NET下无法访问json数据的解决办法

直接调用官网的Demo中的方法 , 将json数据存储在同目录下,但是在运行之后树没有出现,用FireBug调试,错误如下不允许访问json数据,刚开始以为是权限不够,然后又给解决方案所在的文件夹设置权限,但是依然无法访问最后查找网上的解决方案,最后了解只需要将json数据文件的后缀名改成aspx即可.…

【easyui学习笔记1-（datagrid+dialog）】的更多相关文章