Jquery EasyUI的添加,修改,删除,查询等基本操作介绍

合集下载

jquery-easy-ui解析

$("#myDiv").panel("setTitle", "设置title");
四、布局LAYOU
广州传智播客
4.1、EASYUI布局-LAYOUT
在easyui里面只有一种布局方式，layout（东、南、西、北、中）的布局方式，创建layout布局的方式如下:
<div style="width: 500px; height: 700px;" class="easyui-layout"> <div data-options="region:'north'" style="height: 50px; width: 500px;">这是一个北部面板</div> <div data-options="region:'south'" style="height: 50px">这是一个南部面板</div> <div data-options="region:'west'" style="width: 100px">这是一个西部面板 </div> <div data-options="region:'east'" style="width: 100px">这是一个北东部面板</div> <div data-options="region:'center'">这是一个中间面板</div> </div>

JQueryEasyUi（Tree树）详解（转）

JQueryEasyUi（Tree树）详解（转）第⼀讲：JQuery Easy Ui到底是什么呢？⾸先咱们知道JQuery是对Java Script的封装，是⼀个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

JQuery ui是在jQuery的基础上，利⽤jQuery的扩展性，设计的插件。

那么JQuery Easy Ui到底是什么呢？我的理解就是⽐JQuery ui更强⼤，同样都是实现绚丽的多功能效果！jQuery Easy UI的⽬的就是帮助Web开发者更轻松的打造出功能更丰富并且更美观的UI界⾯。

当然JQuery Easy ui提供了⽤于创建跨浏览器⽹页的完整的组件集合，包括功能强⼤的 datagrid（数据⽹格）、treegrid（树形表格）、 panel（⾯板）、combo（下拉组合）等等。

⽤户可以组合使⽤这些组件，也可以单独使⽤其中⼀个。

其实就这么简单，对某个事物的定义，个⼈感觉没有什么固定的答案，只是那种答案更⽅便你的记忆，你记住的，它存在你深深的脑海⾥的，便是答案！JQuery Easy Ui插件列表如下：分类插件Base（基础）Parser 解析器Easyloader 加载器Draggable 可拖动Droppable 可放置Resizable 可调整尺⼨Pagination 分页Searchbox 搜索框Progressbar 进度条Tooltip 提⽰框Layout（布局）Panel ⾯板Tabs 标签页/选项卡Accordion 折叠⾯板Layout 布局Menu（菜单）与 Button（按钮）Menu 菜单Linkbutton 链接按钮Menubutton 菜单按钮Splitbutton 分割按钮Form（表单）Form 表单Validatebox 验证框Combo 组合Combobox 组合框Combotree 组合树Combogrid 组合⽹格Numberbox 数字框Datebox ⽇期框Datetimebox ⽇期时间框Calendar ⽇历Spinner 微调器Numberspinner 数值微调器Timespinner 时间微调器Slider 滑块Window 窗⼝Window（窗⼝）Window 窗⼝Dialog 对话框Messager 消息框DataGrid（数据⽹格）与Tree（树）Datagrid 数据⽹格Propertygrid 属性⽹格Tree 树Treegrid 树形⽹格但是今天咱们只针对Tree（树）连接数据进⾏讲解！下⾯是它的⼀些基本的属性：id: 绑定到节点的标识值；text:显⽰⽂本；iconCls: 显⽰icon的css样式；checked: 节点是否选中；state: 节点状态, 'open' 或者 'closed'；attributes: 绑定到节点的⾃定义属性；target: ⽬标 DOM 对象；children: ⼀个节点数组,定义⼀些⼦节点。

JQuery EasyUI学习教程之datagrid 添加、修改、删除操作

一篇关于JQueryEasyUI学习之datagrid 添加、修改、删除学习笔记教程有需要了解的朋友可参考本的笔记,批量删除，双击表单修改、选中行修改，增加行修改，再有就是扩展editor的方法，无需废话，直接上代码，代码中的注释写的很详细<script type="text/javascript" charst="utf-8">var editFlag = undefined;//设置一个编辑标记//因为layout框架指向href时，只取html页面body中间的部分，所以该页面这样写即可//有datagrid包含属性较多，所以尽量使用js的方式初始化datagrid框架$(function () {$("#dg").datagrid({url: "GetJson.ashx", //指向一个一般处理程序或者一个控制器，返回数据要求是Json格式，直接赋值Json格式数据也可，我以demo中自带的Json数据为例，就不写后台代码了，但是我会说下后台返回的注意事项iconCls: "icon-add",fitColumns: false, //设置为true将自动使列适应表格宽度以防止出现水平滚动,false则自动匹配大小//toolbar设置表格顶部的工具栏，以数组形式设置idField: 'id', //标识列，一般设为id，可能会区分大小写，大家注意一下loadMsg: "正在努力为您加载数据", //加载数据时向用户展示的语句pagination: true, //显示最下端的分页工具栏rownumbers: true, //显示行数1，2，3，4...pageSize: 10, //读取分页条数，即向后台读取数据时传过去的值pageList: [10, 20, 30], //可以调整每页显示的数据，即调整pageSize每次向后台请求数据时的数据//由于datagrid的属性过多，我就不每个都介绍了，如有需要，可以看它的APIsortName: "name", //初始化表格时依据的排序字段必须和数据库中的字段名称相同sortOrder: "asc", //正序columns: [[{field: 'code', title: 'Code', width: 100,editor: {//设置其为可编辑type: 'validatebox',//设置编辑样式自带样式有：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree 可自行扩展options: {}}},{field: 'name', title: 'Name', width: 100, sortable: true,editor: {//设置其为可编辑type: 'validatebox',//设置编辑格式options: {required: true//设置编辑规则属性}}},//sortable:true点击该列的时候可以改变升降序{field: 'addr', title: 'addr', width: 100,editor: {//设置其为可编辑type: 'datetimebox',//这里我们将进行一个datetimebox的扩展options: {required: true//设置编辑规则属性}}}]],//这里之所以有两个方括号，是因为可以做成水晶报表形式，具体可看demo toolbar: [{//在dategrid表单的头部添加按钮text: "添加",iconCls: "icon-add",handler: function () {if (editFlag != undefined) {$("#dg").datagrid('endEdit', editFlag);//结束编辑，传入之前编辑的行}if (editFlag == undefined) {//防止同时打开过多添加行$("#dg").datagrid('insertRow', {//在指定行添加数据，appendRow是在最后一行添加数据index: 0, // 行数从0开始计算row: {code: '',name: '请输入姓名',addr: ''}});$("#dg").datagrid('beginEdit', 0);//开启编辑并传入要编辑的行editFlag = 0;}}}, '-', {//'-'就是在两个按钮的中间加一个竖线分割，看着舒服text: "删除",iconCls: "icon-remove",handler: function () {//选中要删除的行var rows = $("#dg").datagrid('getSelections');if (rows.length > 0) {//选中几行的话触发事件$.message.confirm("提示", "您确定要删除这些数据吗？", function (res) {//提示是否删除if (res) {var codes = {};for (var i = 0; i < rows.length; i++) {codes.push(rows[i].code);}(codes.join(','));//拼接字符串并传递到后台处理数据，循环删除，成功后刷新datagrid}});}}}, '-', {text: "修改",iconCls: "icon-edit",handler: function () {//选中一行进行编辑var rows = $("#dg").datagrid('getSelections');if (rows.length == 1) {//选中一行的话触发事件if (editFlag != undefined) {$("#dg").datagrid('endEdit', editFlag);//结束编辑，传入之前编辑的行}if (editFlag == undefined) {var index = $("#dg").datagrid('getRowIndex', rows[0]);//获取选定行的索引$("#dg").datagrid('beginEdit', index);//开启编辑并传入要编辑的行editFlag = index;}}}}, '-', {text: "保存",iconCls: "icon-save",handler: function () {$("#dg").datagrid('endEdit', editFlag);}}, '-', {text: "撤销",iconCls: "icon-redo",handler: function () {editFlag = undefined;$("#dg").datagrid('rejectChanges');}}, '-'],onAfterEdit: function (rowIndex, rowData, changes) {//在添加完毕endEdit，保存时触发(rowData);//在火狐浏览器的控制台下可看到传递到后台的数据，这里我们就可以利用这些数据异步到后台添加，添加完成后，刷新datagrideditFlag = undefined;//重置}, onDblClickCell: function (rowIndex, field, value) {//双击该行修改内容if (editFlag != undefined) {$("#dg").datagrid('endEdit', editFlag);//结束编辑，传入之前编辑的行}if (editFlag == undefined) {$("#dg").datagrid('beginEdit', rowIndex);//开启编辑并传入要编辑的行editFlag = rowIndex;}}});});//点击查找按钮出发事件function searchFunc() {alert("123");$("#dg").datagrid("load", sy.serializeObject($("#searchForm").form()));//将searchForm表单内的元素序列为对象传递到后台//这里介绍reload的使用，使用reload时，会默认记住当前页面，当点击查询时，如果我们查到的数据只有三条，我们每页显示10挑数据，当前页码是2，那么我们将无法在当前页面看到我们查询出的结果，只有将页面向前跳转才会看到，但是用load就不会出现这种情况}//点击清空按钮出发事件function clearSearch() {$("#dg").datagrid("load", {});//重新加载数据，无填写数据，向后台传递值则为空$("#searchForm").find("input").val("");//找到form表单下的所有input标签并清空}</script><div class="easyui-tabs" fit="true" border="false"><div title="数据展示表格" border="false" fit="true"><div class="easyui-layout" fit="true" border="false"><div data-options="region:'north',title:'高级查询'" style="height: 100px; background: #F4F4F4;"><form id="searchForm"><table><tr><th>用户姓名：</th><td><input name="name" /></td></tr><tr><th>创建开始时间</th><td><input class="easyui-datetimebox" editable="false" name="subStartTime" /></td><th>创建结束时间</th><td><input class="easyui-datetimebox" editable="false" name="nsubEndTimeame" /></td><td><a class="easyui-linkbutton" href="javascript：void(0);" onclick="searchFunc();">查找</a></td><td><a class="easyui-linkbutton" href="javascript：void(0);" onclick="clearSearch();">清空</a></td></tr></table></form></div><div data-options="region:'center',split:false"><table id="dg"></table></div></div></div></div>扩展editor方法：datetimebox$(function () {/*扩展Editors的datetimebox方法*/$.extend($.fn.datagrid.defaults.editors, {datetimebox: {//为方法取名init: function (container, options) {var editor = $('<input />').appendTo(container);options.editable = false;//设置其不能手动输入editor.datetimebox(options);return editor;},getValue: function (target) {//取值return $(target).datetimebox('getValue');},setValue: function (target, value) {//设置值$(target).datetimebox('setValue', value);},resize: function (target, width) {$(target).datetimebox('resize', width);},destroy: function (target) {$(target).datetimebox('destroy');//销毁生成的panel}}});});以上所述是小编给大家介绍的JQuery EasyUI datagrid 添加、修改、删除操作的全部叙述，希望对大家有所帮助。

JqueryEasyUI的添加，修改，删除，查询等基本操作介绍

JqueryEasyUI的添加，修改，删除，查询等基本操作介绍初识Jquery EasyUI看了⼀些博主⽤其开发出来的项⽬，页⾯很炫，感觉功能挺强⼤，效果也挺不错，最近⼀直想系统学习⼀套前台控件，于是在⽹上找了⼀些参考⽰例。

写了⼀些基本的增删改查功能，算是对该控件的基本⼊门。

后续有时间继续深⼊学习。

先看⼀下运⾏后的页⾯1、列表展⽰2、新增页⾯3、修改页⾯把jquery easyui下载好之后，⼀般引⽤下页⼏个⽂件复制代码代码如下:<link href="/Resources/easyui/css/default.css" rel="stylesheet" type="text/css" /><link href="/Resources/easyui/js/themes/default/easyui.css" rel="stylesheet"type="text/css" />//页⾯图标样式<link href="/Resources/easyui/js/themes/icon.css" rel="stylesheet" type="text/css" /><script src="/Resources/easyui/js/jquery-1.7.2.min.js" type="text/javascript"></script>//jquery easyui主要的js<script src="/Resources/easyui/js/jquery.easyui.min.js" type="text/javascript"></script>⾸先是列表展⽰数据复制代码代码如下:<table id="dg" title="My Users" class="easyui-datagrid" style="width: 700px; height: 250px"url="/GetJson/CreateJson.aspx" toolbar="#toolbar" pagination="true" rownumbers="true"fitcolumns="true" singleselect="true"><thead><tr><th field="AccountCode" width="50">编号</th><th field="AccountName" width="50">卡名</th><th field="AccountPwd" width="50">密码</th><th field="CreateTime" width="50">创建时间</th><th field="CreateName" width="50">创建⼈</th></tr></thead></table>jquery easyui是⽤datagrid对数据进⾏展⽰的，所以class要选择easyui-datagrid；url是本列表的⼀个json格式的数据来源toobar后⾯跟着的"#toobar"是列表的⼀个⼯具栏，本⽰例在列表上显⽰的是添加，修改，删除功能按钮对数据进⾏操作。

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

最近公司要用easyui，这里自己看了官网几篇文章，遇到些问题，大多数的问题都是敲代码的时候笔误，其他有些地方确实需要注意一下，这里做些笔记。

1.在mysql中建好表之后修改id字段为递增字段，发现这个奇怪的mysql语法，如下alter table student change id id int auto_increment;这句是在student表已经建好的情况下来修改字段id为自增列，奇怪的是为嘛change id id，并且后面还要带上id的类型int？2.html5标记如何申明自己这个html文档是html5标准的呢，<!DOCTYPE html>就这句，根据w3c 上的解释，只能是这一句3.定义一个表格的语法如下<table id="dg" title="My User" class="easyui-datagrid"style="width:700px;height:250px"url="get_users.php" toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true"><thead><tr><th field="firstname" width="50">First Name</th><th field="lastname" width="50">Last Name</th><th field="phone" width="50">Phone</th><th field="email" width="50">Email</th></tr></thead></table>注意这里很多的标签元素是不符合html4的规范的url="get_users.php"这个，在html5里面才有用，在html4里面是不规范的，没有这个元素，toolbar="#toolbar"这个表示表格的工具栏，就是新加，删除，修改的操作。

Easyui datagrid行内【添加】、【编辑】、【上移】、【下移】

$("#Student_Table").datagrid('insertRow', {
index: 0,
row: {}
});
$("#Student_Table").datagrid('beginEdit', 0);
editRow = 0;
}
}
}, '-', {
text: '保存', iconCls: 'icon-save', handler: function() {
103
104
105
106
107
functionGetTable() {
vareditRow = undefined;
$("#Student_Table").datagrid({
height: 300,
width: 450,
title: '学生表',
collapsible: true,
singleSelect: true,
{ field: 'Age', title: '年龄', width: 100, align: 'center', editor: { type: 'text', options: { required: true} } },
{ field: 'Address', title: '地址', width: 100, align: 'center',editor: { type: 'text', options: { required: true} } }

jquery_easyui_详细说明文档资料讲解

j q u e r y_e a s y u i_详细说明文档目录div easyui-window ...................................................................................... window窗口样式 (3)div easyui-panel ................................................................................................................ 面板 (3)a easyui-linkbutton ....................................................................................... 链接类型的按钮 (4)input/textarea easyui-validatebox .............................................................................. 字段验证 (4)ul easyui-tree ........................................................................................................... 树形结构 (5)table easyui-datagrid ......................................................................................................... 表格 (6)div easyui-tabs ........................................................................................................... tab容器 (7)div menu-sep ....................................................................................................... 菜单分隔线 (8)a easyui-splitbutton ....................................................................................................... 菜单列 (8)div easyui-accordion ...................................................................................... 手风琴式下拉框 (8)select easyui-combobox ......................................................................................... 组合下拉框 (8)select easyui-combotree ........................................................................................ 组合树形框 (9)body[div] easyui-layout ..................................................................................................... 布局 (9)div easyui-menu ............................................................................................................... 菜单 (9)a easyui-menubutton ................................................................................................ 菜单按钮. (10)input easyui-numberbox ........................................................................................ 数字输入框. (10)window ............................................................................................................ window窗口. (10).tree ....................................................................................................................... 树形结构. (10).datagrid ......................................................................................................................... 表格. (10).combobox .......................................................................................................... 组合下拉框. (10).combotree ......................................................................................................... 组合树形框. (10).dialog ........................................................................................................................ 对话框. (10).draggable ................................................................................................... 可自由拖动的块. (11).linkbutton .............................................................................................................. 链式按钮. (11).messager ................................................................................................................... 消息框. (11).pagination .......................................................................................................... 页码工具条. (12)CSS类定义：div easyui-window window窗口样式属性如下：1)modal:是否生成模态窗口。

【EasyUI】JQueryEasyUI简介

【EasyUI】JQueryEasyUI简介简介easyui是⼀种基于jQuery的⽤户界⾯插件集合。

easyui为创建现代化，互动，JavaScript应⽤程序，提供必要的功能。

使⽤easyui你不需要写很多代码，你只需要通过编写⼀些简单HTML标记，就可以定义⽤户界⾯。

easyui是个完美⽀持HTML5⽹页的完整框架。

easyui节省您⽹页开发的时间和规模。

easyui很简单但功能强⼤的。

jQueryEasyUI的特点1. ⽀持HTML52. ⽀持拓展，可以根据⾃⼰的需要拓展控件3. 源代码加密，商业版付费EasyUI中⼤部分的控件都可以通过 Html / JS调出2. 将框架包解压后, 整个⽂件夹复制到项⽬中,并将⽂件夹名称修改为easyui3. 引⼊必要的JS与CSS⽂件//引⼊ jQuery 核⼼库，这⾥采⽤的是 2.0<script type="text/javascript" src="easyui/jquery.min.js"></script>//引⼊ jQuery EasyUI 核⼼库，这⾥采⽤的是 1.3.6<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>//引⼊ EasyUI 中⽂提⽰信息<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>//引⼊ EasyUI 核⼼ UI ⽂件 CSS<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>//引⼊ EasyUI 图标⽂件<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>。

easy,ui,可编辑表格

竭诚为您提供优质文档/双击可除easy,ui,可编辑表格篇一：jqueryeasyui的添加,修改,删除,查询等基本操作介绍jqueryeasyui的添加，修改，删除，查询等基本操作介绍作者：字体：[增加减小]类型：转载初识jqueryeasyui看了一些博主用其开发出来的项目，页面很炫，感觉功能挺强大，效果也挺不错，最近一直想系统学习一套前台控件，于是在网上找了一些参考示例初识jqueryeasyui看了一些博主用其开发出来的项目，页面很炫，感觉功能挺强大，效果也挺不错，最近一直想系统学习一套前台控件，于是在网上找了一些参考示例。

写了一些基本的增删改查功能，算是对该控件的基本入门。

后续有时间继续深入学习。

在学习jqueryeasyui前应该先到官网下载最新版本/download/index.php先看一下运行后的页面1、列表展示2、新增页面3、修改页面把jqueryeasyui下载好之后，一般引用下页几个文件复制代码代码如下:rel="stylesheet"type="text/css"/>href="/Resources/easyui/js/themes/default/easyui.cs s"rel="stylesheet"type="text/css"/>//页面图标样式href="/Resources/easyui/js/themes/icon.css"rel="sty lesheet"type="text/css"/>src="/Resources/easyui/js/jquery-1.7.2.min.js"type= "text/javascript">//jqueryeasyui主要的jssrc="/Resources/easyui/js/jquery.easyui.min.js"type ="text/javascript">首先是列表展示数据复制代码代码如下:url="/getjson/createjson.aspx"toolbar="#toolbar"pag ination="true"rownumbers="true"fitcolumns="true"singleselect="true">编号卡名密码创建时间创建人jqueryeasyui是用datagrid对数据进行展示的，所以class要选择easyui-datagrid；url是本列表的一个json格式的数据来源toobar后面跟着的"#toobar"是列表的一个工具栏，本示例在列表上显示的是添加，修改，删除功能按钮对数据进行操作。

jquery-easyui中文详细说明文档完整

Jquery easyui 使用说明1. Layout 布局 (1)1.1. 样图 (1)1.2. 示例代码 (2)2. tabs面板 (3)2.1. 样图 (3)2.2. 示例代码 (3)3. jQuery EasyUI 提示框(Messager)用法 (5)3.1. 样图 (5)3.2. 示例代码 (5)4. 分页(Pagination)用法 (6)4.1. 样图 (7)4.2. 示例代码 (7)5. jQuery EasyUI 对话框(Dialog)用法 (8)5.1. 示例图片 (8)5.2. 示例代码 (8)6. jQuery EasyUI 窗口(Window)用法 (9)6.1. 样图 (10)6.2. 示例代码 (10)7. jQuery EasyUI 验证框(V alidateBox)用法 (11)7.1. 样图 (11)7.2. 示例代码 (11)8. jQuery EasyUI 数字框(NumberBox)用法 (13)8.1. 样图 (13)8.2. 示例代码 (13)9. DataGrid (13)yout 布局1.1. 样图UsageMarkup在div 里面加载布局的方法:class="easyui-layout"布局面板必需要有一个'center' 面板.1.2. 示例代码<div id="cc" style="width:600px;height:400px;" class="easyui-layout"><div region="north" title="North Title" split="true" style="height:100px;"></div><div region="south" title="South Title" split="true" style="height:100px;"></div><div region="east" icon="icon-reload" title="East" split="true" style="width:100px;"></div><div region="west" split="true" title="West" style="width:100px;"></div><div region="center" title="center title" style="padding:5px;background:#eee;"></div></div>jQuery$('#cc').layout(options);DependenciespanelresizableOptionsLayout Panel Options所有属性都是放在<div/>标签里面null标题名字，当写了名字后将会产生折叠图标false booleanTrue时,面板间将产生一个拖动条可改变面板间大小在面板头部显示图标的CSSnull 将在布局面板中产生一个图标如：icon="icon-reload"fit="true" 自动改变大小Methods2.tabs面板2.1. 样图2.2. 示例代码在<div/>标签里使用方法class="easyui-tabs"UsageMarkup<div id="tt" style="width:500px;height:250px;" class="easyui-tabs"><div title="Tab1" style="padding:20px;display:none;">tab1</div><div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;"> tab2</div><div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;"> tab3</div></div>jQueryTo create a tabs container$('#tt').tabs(options);To add a tab panel:$('#tt').tabs('add',{title:'New Tab',content:'Tab Body',closable:true});DependenciesnoneOptionsTabs ContainerOverride defaults with $.fn.tabs.defaults.PropertiesEvents方法标签面板属性3.jQuery EasyUI 提示框(Messager)用法jQuery EasyUI 提示框(Messager)不仅重写了window默认的alert,confirm和prompt，而且还增加一些在页面右下角显示的提示框。

EasyUI使用教程

EasyUI使用教程
使用EasyUI必须导入其js以及css等.
jquery-easyui-1.3.5.zip
1.(l)list界面
效果图:
图1
a)
note: url是想那个地址请求数据,pagination:是否显示分页.fitColumns是否自动使
用宽度,singleSelect是否可以多选
关于<th>中的field的值,必须和数据库中你要显示的字段名相同.
b)添加/删除/修改等事件
增加效果图(其他略):
图2
这样即可
c)分页:效果同上上图
图3
其中pagiination=”true”设置有分页.实现分页的js代码为:
note:开始时,点击分页栏中的刷新按钮不管用,一看忘记了实现onRefresh方法.具体
剩下的方法看文档: /documentation/index.php
在线demo: /demo/main/index.php
d)
e)
f)
2.初始化菜单导航栏:
开始时,采用直接在jsp页面中添加代码的方式,但是为了以后配置的方便,改成了读取
那么通过js读取出来,动态添加到导航菜单中,js:
里面有个addTab(tabId,title,url)的方法,他的作用是在主MainFrame中添加tab
然后就可以了.
还有些双击关闭等功能:参考实例代码.
3.累死了,先回去睡觉去.
4. d
5. d
6.dd
7.。

jqueryEasyuiDatagrid实现批量操作（编辑，删除，添加）

jqueryEasyuiDatagrid实现批量操作（编辑，删除，添加）有时候我们的后台系统表单⽐较复杂，做过进销存或者⼀些销售订单的都应该有过感觉。

虽然Easyui Datagrid提供了⾏内编辑，但是不够灵活，但是我们稍微修改⼀下来达到批量编辑,批量删除,批量添加的效果。

现在我们来看看原的编辑:来⾃Easyui 1.5.1的Demo <demo/datagrid/rowediting.html>接下来，我们主要是要⾼度⾃由的编辑实现：1.可以同时追加多⾏2.追加的⾏可以是任何位置3.可以随时进⾏编辑任意位置的⾏4.保存再统⼀验证实现在原有的rowediting.html进⾏修改！第⼀：修改⾏的点击事件（点击⾏的时候进⼊编辑状态）function onClickCell(index, field){if (editIndex != index) {if (endEditing()) {$('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);var ed = $('#dg').datagrid('getEditor', { index: index, field: field });if (ed) {($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();}editIndex = index;} else {setTimeout(function () {$('#dg').datagrid('selectRow', editIndex);}, 0);}}}第⼆：删除事件（点击顶部菜单Remove删除选中的⾏，点击列表的-号，删除减号⾏）function removeit(){if (editIndex == undefined){return}$('#dg').datagrid('selectRow', editIndex);$('#dg').datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex);editIndex = undefined;}第三：添加事件，点击菜单的Append和+号function append(){var index = $('#dg').datagrid('getRowIndex', $('#dg').datagrid('getSelected'));if (index == -1)index = 0;$("#dg").datagrid("insertRow", {index: index+1,row: {oper: "<a href='javascript:append()'>+<a> <a href='javascript:removeit()'>-<a>",status:'P'}});}第四：保存（获得操作的记录，包括，增加，修改，删除中的记录）function accept(){if (endEditing()){var $dg = $('#dg');var rows = $dg.datagrid('getChanges');if (rows.length) {var inserted = $dg.datagrid('getChanges', "inserted");var deleted = $dg.datagrid('getChanges', "deleted");var updated = $dg.datagrid('getChanges', "updated");var effectRow = new Object();if (inserted.length) {effectRow["inserted"] = JSON.stringify(inserted);}if (deleted.length) {effectRow["deleted"] = JSON.stringify(deleted);}if (updated.length) {effectRow["updated"] = JSON.stringify(updated);}//alert(inserted);//alert(deleted);//alert(updated);}}//$.post("/Home/Commit", effectRow, function (rsp) {// if (rsp) {// $dg.datagrid('acceptChanges');// bindData();// }//}, "JSON").error(function () {// $.messager.alert("提⽰", "提交错误了！");//});}最后我们可以获得，上⾯操作的，所有：添加的⾏，删除的⾏，更新的⾏！把数据传⼊到数据后台进⾏处理！最后你还需要对数据进⾏循环校验,可以获得数据，在控制台输出：console.log(inserted);console.log(deleted);console.log(updated);总结：最后完整代码：（替换Easyui的rowediting.html可运⾏效果）<!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" rel="external nofollow" ><link rel="stylesheet" type="text/css" href="../../themes/icon.css" rel="external nofollow" ><link rel="stylesheet" type="text/css" href="../demo.css" rel="external nofollow" ><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;"></div><table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:800px;height:auto"data-options="iconCls: 'icon-edit',singleSelect: true,toolbar: '#tb',url: 'datagrid_data1.json',method: 'get',onClickCell: onClickCell,onEndEdit: onEndEdit"><thead><tr><th data-options="field:'oper',width:80">操作</th><th data-options="field:'itemid',width:80">Item ID</th><th data-options="field:'productid',width:100,formatter:function(value,row){return row.productname;},editor:{type:'combobox',options:{valueField:'productid',textField:'productname',method:'get',url:'products.json',}}">Product</th><th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th><th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th><th data-options="field:'attr1',width:250,editor:'textbox'">Attribute</th><th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th></tr></thead></table><div id="tb" style="height:auto"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a> </div><script type="text/javascript">//编辑的⾏var editIndex = undefined;function endEditing() {if (editIndex == undefined){return true}$('#dg').datagrid('endEdit', editIndex);editIndex = undefined;return true;}function onClickCell(index, field){if (editIndex != index) {if (endEditing()) {$('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);var ed = $('#dg').datagrid('getEditor', { index: index, field: field });if (ed) {($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();}editIndex = index;} else {setTimeout(function () {$('#dg').datagrid('selectRow', editIndex);}, 0);}}}function onEndEdit(index, row){var ed = $(this).datagrid('getEditor', {index: index,field: 'productid'});row.productname = $(ed.target).combobox('getText');}function append(){var index = $('#dg').datagrid('getRowIndex', $('#dg').datagrid('getSelected'));if (index == -1)index = 0;$("#dg").datagrid("insertRow", {index: index+1,row: {oper: "<a href='javascript:append()'>+<a> <a href='javascript:removeit()'>-<a>",status:'P'} });}function removeit(){if (editIndex == undefined){return}$('#dg').datagrid('selectRow', editIndex);$('#dg').datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex);editIndex = undefined;}function accept(){if (endEditing()){var $dg = $('#dg');var rows = $dg.datagrid('getChanges');if (rows.length) {var inserted = $dg.datagrid('getChanges', "inserted");var deleted = $dg.datagrid('getChanges', "deleted");var updated = $dg.datagrid('getChanges', "updated");var effectRow = new Object();if (inserted.length) {effectRow["inserted"] = JSON.stringify(inserted);}if (deleted.length) {effectRow["deleted"] = JSON.stringify(deleted);}if (updated.length) {effectRow["updated"] = JSON.stringify(updated);}//alert(inserted);//alert(deleted);//alert(updated);}}//$.post("/Home/Commit", effectRow, function (rsp) {// if (rsp) {// $dg.datagrid('acceptChanges');// bindData();// }//}, "JSON").error(function () {// $.messager.alert("提⽰", "提交错误了！");//});}function reject(){$('#dg').datagrid('rejectChanges');editIndex = undefined;}function getChanges(){var rows = $('#dg').datagrid('getChanges');alert(rows.length+' rows are changed!');}function contains(arr, obj) {var i = arr.length;while (i--) {if (arr[i] === obj) {return true;}}return false;}</script></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

jquery-easyui中文详细说明文档

在web开发中经常会遇到分页的需求如果靠我们手写代码可能代码又多样式又不好看下面介绍一下jqueryeasyui分页功能非常的方便简单下面看一下
jquery-easyui中文详细说明文档
Jquery easyui 使用说明 1. Layout 布局 (1) 1.1. 样图 (1) 1.2. 示例代码 (2) 2. tabs面板 (3) 2.1. 样图 (3) 2.2. 示例代码 (3) 3. jQuery EasyUI 提示框(Messager)用法 (5) 3.1. 样图 (5) 3.2. 示例代码 (6) 4. 分页(Pagination)用法 (7) 4.1. 样图 (7) 4.2. 示例代码 (7) 5. jQuery EasyUI 对话框(Dialog)用法 (9) 5.1. 示例图片 (9) 5.2. 示例代码 (9) 6. jQuery EasyUI 窗口(Window)用法 (10) 6.1. 样图 (10) 6.2. 示例代码 (11) 7. jQuery EasyUI 验证框(ValidateBox)用法 (12) 7.1. 样图 (12) 7.2. 示例代码 (12) 8. jQuery EasyUI 数字框(NumberBox)用法 (13) 8.1. 样图 (14) 8.2. 示例代码 (14) 9. DataGrid (14) /doc/573e9e0752d380eb62946d6f.html yout 布局 1.1. 样图
Usage
Markup 在div 里面加载布局的方法:class="easyui-layout" 布局面板必需要有一个'center' 面板. 1.2.

Easyui-fileUpload使用手册V1.6.4

250
数字
showCbFilesGrid
是否生成回显文件表格,特殊情况下可以自定义回显表格
true
boolean
maxQueryFiles
回显时，一次最大查询出的文件数
20
数字
echoType
文件上传后，回显方式选择，默认：1
1：在当前容器下生成datagrid表格，提供“添加、修改、删除、查看、下载”等功能，可以通过参数对按钮权限进行配置。
1：在当前容器下生成datagrid表格，提供“添加、修改、删除、查看、下载”等功能，可以通过参数对按钮权限进行配置。
2：以文件名列表形式展示，一个文件名称就是一行
3：不回显，根据控件提供的方法（getUploadFiles详见使用手册），自己定义回显样式
6.添加属性：fileWrap
echoType = 2,文件是否换行，true：一个文件一行，false：都在一行
uploadFace
2.$('#objId').fileUpload('property',{
'fileGuid':'-1',
'msgAlign':'bottom'
});
6.添加事件：onDeleteFile删除文件前调用
参数：fileIdList数组类型[],里面为选择的文件fileId
返回：boolean true:执行删除，false：终止删除
.添加autoCloseOnEsc属性，true：esc关闭窗口
.修改部分提示信息样式，对里面的重要内容添加颜色以区分
屈福兴
2016.4.29
V1.3
优化：

JQuery EasyUI DataGrid 编程经验

JQuery EasyUI DataGrid 编程经验最近，在项目中用到JQuery EasyUI DataGrid，虽然它封装了表格的实现，为我们提供很多便利，但是在使用的过程中，还是会遇到一些困难和问题。

目前，问题都已经解决，特分享我使用DataGrid开发的经验。

(PS:我用的是JSP和J2EE框架开发)。

1.数据的提取和显示。

DataGrid是通过url属性获取数据的。

例如:url:'ListInfo.action',这样通过调用Action 中的方法获取数据。

返回的是JSON字串。

注意，JSON字串必须按照DataGrid定义的数据格式进行拼装。

这种数据格式，可以参考我前面的文章中的附件。

特别强调的是，JSON字串中的total域的值是数据的条数，用于数据的分页。

2.数据的分页。

数据的分页分为前台分页和后台分页，前台分页，DataGrid已经封装好了。

DataGrid定义了两个参数: rows(每页的条数)，page(当前的页数)，这两个参数分别对应属性pageSize，pageNumber。

用户可以在pageSize，pageNumber属性中设置，也可以不设置，这样就取默认值。

我们只需在Action中定义两个变量，private int rows; private int page; 接着通过SQL语句获取需要取的值。

分页的SQL语句(Oracle)如下:1.select * from(2.select rownum r, field1,field2 from table_name where rownum <= page* rows(3.)4.where r > (page-1) * rows这样提取的数据的条数赋值给total域，拼装在JSON字串中返回，就可以实现分页了。

当然，pagination:true,是当然需要的。

3.数据的操作。

数据的操作大致可分为：查看，删除。

简述 jquery 中插入节点、修改节点、删除节点、复制节点的方法

简述 jQuery 中插入节点、修改节点、删除节点、复制节点的方法jQuery 是一种流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画效果和 Ajax 操作等操作。

在使用 jQuery 进行前端开发时，插入节点、修改节点、删除节点以及复制节点是常见的操作之一。

本文将简要介绍 jQuery 中插入节点、修改节点、删除节点、复制节点的方法。

正文一、插入节点在 jQuery 中，可以使用以下方法向文档中插入节点：1. append()：向选定元素的结尾插入内容。

2. prepend()：向选定元素的开头插入内容。

3. after()：在选定元素之后插入内容。

4. before()：在选定元素之前插入内容。

例如，要在一个 `<div>` 元素中插入一个 `<p>` 元素，可以使用以下代码：```javascript$('#myDiv').append('<p>This is a new paragraph.</p>');```二、修改节点在 jQuery 中，可以使用以下方法修改节点：1. text()：设置或返回选定元素的文本内容。

2. html()：设置或返回选定元素的 HTML 内容。

3. attr()：设置或返回选定元素的属性值。

例如，要修改一个 `<p>` 元素的文本内容和属性值，可以使用以下代码：```javascript$('p').text('This is a new text.');$('p').attr('id', 'myParagraph');```三、删除节点在 jQuery 中，可以使用以下方法删除节点：1. remove()：从文档中删除选定元素及其子元素。

2. empty()：从选定元素中删除子元素。

简述 jquery 中插入节点、修改节点、删除节点、复制节点的方法。

jQuery是一个快速、简洁的JavaScript库，提供了很多便捷的方法来操作HTML文档中的DOM节点。

在jQuery中，可以使用以下方法来插入节点、修改节点、删除节点和复制节点。

1.插入节点：- `.append(content)`：在被选元素内部的末尾插入内容。

- `.prepend(content)`：在被选元素内部的开头插入内容。

- `.after(content)`：在被选元素之后插入内容。

- `.before(content)`：在被选元素之前插入内容。

2.修改节点：- `.html(content)`：设置被选元素的HTML内容。

- `.te某t(content)`：设置被选元素的文本内容。

- `.attr(attributeName, value)`：设置被选元素的属性值。

- `.addClass(className)`：添加一个或多个类名到被选元素。

- `.removeClass(className)`：从被选元素中删除一个或多个类名。

3.删除节点：- `.remove(`：删除被选元素（包括其子元素）。

- `.empty(`：从被选元素中删除子元素。

4.复制节点：- `.clone(`：复制被选元素。

以下是一些示例应用：1.插入节点：```javascript$("#myElement").append("<p>插入的内容</p>");$("#myElement").prepend("<p>插入的内容</p>");$("#myElement").after("<p>插入的内容</p>");$("#myElement").before("<p>插入的内容</p>");```2.修改节点：```javascript$("#myElement").html("<p>新的HTML内容</p>");$("#myElement").te某t("新的文本内容");$("#myElement").addClass("newClass");$("#myElement").removeClass("oldClass");```3.删除节点：```javascript$("#myElement").remove(;$("#myElement").empty(;```4.复制节点：```javascriptvar cloneElement = $("#myElement").clone(;```总结：以上是jQuery中用于插入节点、修改节点、删除节点和复制节点的一些基本方法。

jquery-easyui教程和api

教程概述这个教程的目的是说明如何使用easyui框架容易的创建网页。

首先，你需要包含一些js和css文件：<link rel="stylesheet"type="text/css"href="../themes/default/easyui.css"><script type="text/javascript"src="../jquery-1.4.2.min.js"></script><script type="text/javascript"src="../jquery.easyui.min.js"></script>easyui预定义了一些图标css，这些css类可以显示图片背景（16×16）。

使用这些类之前，需要包含：<link rel="stylesheet"type="text/css"href="../themes/icon.css">内容1.拖放o基本拖放o创建购物车式拖放o创建课程表基本拖放这个教程显示如何使HTML元素变得可拖放。

这个例子会创建3个DIV元素然后让它们变得可拖放。

首先，创建三个DIV元素：<div id="dd1"class="dd-demo"></div><div id="dd2"class="dd-demo"></div><div id="dd3"class="dd-demo"></div>让第一个DIV元素可拖放，使用默认的拖放样式。

jQuery EasyUI中文帮助手册

记录数。
loading（是否正在载入）
boolean（布尔型）
定义数据是否正在载入。
buttons（按钮）
array（数组）
自定义按钮，每个按钮包含 2 个属性:
iconCls：显示背景图片的 CSS 类
handler：当按钮被点击时调用的一个句柄函数
showPageList（显示可选择的每页记录数）
null
量，X 轴）
deltaY（垂直增
number（数字）
被拖动元素对应于当前指针的垂直位置。
null
量，y 轴）
selector（选择
handle（句柄）
开始拖动的句柄。
null
器）
disabled（停止拖动）
boolean（布尔型）
当设置为 true 时停止拖动。
false
edge（边缘） number（数字）
事件
名称
参数
描述
onProgress name
当一个模块成功载入时触发。
onLoad
name
当一个模块及其所有依赖关系（可以理解为载入该模块所需要的其他模块、属性、方法等）载入时触发。
方法
名称
参数
描述
载入特定的模块。当载入成功时将调用回调函数。
有效的模块参数类型如下:
load module, callback
onRefresh
pageNumber, pageSize
刷新之后触发。
onChangePageSize
pageSize
当用户修改每页显示记录数时触发。
方法
名称参数
描述
options none
返回分页属性对象。