用spring+springmvc+mybatis+mysql实现简单的可编辑单元格,首先是页面效果图: 其中,“编号”列是不可编辑的,“暂缓措施”是可以自由编辑的,主要html组成: jquery-easyui-1.3.3/jquery.easyui.min.js"> jquery-easyui-1.3.3/jquery.edatagrid.js"> 确认流失 edatagrid中定义了四个url属性,代表四种操作的请求路径...,分别为url(列表查询url)、saveUrl(更新保存url)、updateUrl(新增保存url)、deleteUrl(删除url) 主要的controller实现: /** * 客户流失暂缓措施
第一章:认识JQuery 第一阶段:jQuery的基本操作 简介JQuery的由来,以及相类似的其他JavaScript框架(5分钟) 讲解需要的JavaScript包版本以及导入(2分钟) 讲解JQuery...讲解each()方法的使用 第二阶段:操纵Form表单数据:本章通过向Form表单添加JSON数据和从Form表单中获取JSON数据来展示JQuery的选择器作用和属性操作。...3)失去焦点后将文本框中的内容放入到表格中并删除文本框; 4)添加样式让文本框和表格的宽高一致(注意预先在样式中要先定义好td的宽和高),并去掉文本框的边框,让文本框和表格的边框看起来一致,就好像直接在单元格中编辑一样...5)如果连续点击不同的单元格则会出现连续两个或三个可编辑的单元格,解决这个问题需要确保新添加的文本框获得焦点 总结本示例学过的知识点: ( ) 选择器、 � � ( ) 事件绑定、 ()选择器、on()...中的行 col=0;//将新一行的列数置为零 var obj=new Object();//每一行数据装入到一个对象中 (this).children().each(function(){//遍历行中所有的列
核心技能部分 4.1 jQuery选择器 jQuery选择器的主要功能是查找、匹配并获取页面元素,这是进行任何操作的前提。jQuery提供了众多功能强大且使用方便的选择器,完全能满足开发需求。...align="center">第1行td> td align="center">2td> td align="center">第2行td>...td align="center">第5行td> td align="center">6td> td align="center">第6行行2列的表格,然后使用各种过滤选择器获取表格中的行。...实现步骤 (1) 实现图4.2.4所示的界面 (2) 使用jQuery过滤选择器获取把表格中的奇数行(标题行除外) (3) 把获取到得奇数行设置为灰色背景色,参考代码如下所示。
核心技能部分 4.1 jQuery选择器 jQuery选择器的主要功能是查找、匹配并获取页面元素,这是进行任何操作的前提。jQuery提供了众多功能强大且使用方便的选择器,完全能满足开发需求。...">0td>td align="center">第0行td>td align="center">1td>td align="center">第1行td>...">5td>td align="center">第5行td>td align="center">6td>td align="center">第6行td>...,我们在本示例中添加了一个9行2列的表格,然后使用各种过滤选择器获取表格中的行。...实现步骤 (1) 实现图4.2.4所示的界面 (2) 使用jQuery过滤选择器获取把表格中的奇数行(标题行除外) (3) 把获取到得奇数行设置为灰色背景色,参考代码如下所示。
validate none 做验证以确定文本框的内容是否是有效的。...{} sortName 字符串 定义哪一列可以排序 null sortOrder 字符串 定义列排序的方式,递增(asc)或递减(desc) asc editors 对象 定义当编辑某行数据时的编辑器...none 返回所有选定行,如果没选择记录,则返回空数组 clearSelections none 取消所有选择 selectAll none 选择当前页所有行 selectRow index 选择某行,...行索引以0开始 selectRecord idValue 通过id值选择一行 unselectRow index 取消选择某行 beginEdit index 开始编辑某行 endEdit index...结束编辑某行 cancelEdit index 退出编辑某行 refreshRow index 刷新一行的数据 appendRow row 添加新行 deleteRow index 删除一行 getChanges
使用传统的JavaScript就能处理这些交互,但是jQuery增加并扩展了JavaScript事件处理机制,使其使用起来更加优雅和灵活。本章我们重点讲解jQuery中的各种事件以及事件的绑定。 ...核心技能部分 5.1 jQuery事件 jQuery事件是使用面向对象的思想对JavaScript事件做了进一步封装,使用起来更加优雅和灵活,各种事件及其作用如表5-1-1所示。...假设给所有的文本框通过bind绑定了鼠标单击事件,然后再动态创建一个文本框,此时绑定的鼠标单击事件对这个新创建的文本框无效;但是如果使用live进行绑定,那么新创建的文本框也会绑定鼠标单击事件。...添加过两个商品后,表格中一共有3行数据,第1行是原本存在的,后两行是动态创建并添加到表格上的。现在单击表格中的行,我们会发现只有第1行的背景色可以改变,后两行的背景色没有改变。...把bind换成live后,表格中的任何一行在单击时都可以改变背景色,包括动态创建的行。
使用传统的JavaScript就能处理这些交互,但是jQuery增加并扩展了JavaScript事件处理机制,使其使用起来更加优雅和灵活。本章我们重点讲解jQuery中的各种事件以及事件的绑定。...核心技能部分 5.1 jQuery事件 jQuery事件是使用面向对象的思想对JavaScript事件做了进一步封装,使用起来更加优雅和灵活,各种事件及其作用如表5-1-1所示。...假设给所有的文本框通过bind绑定了鼠标单击事件,然后再动态创建一个文本框,此时绑定的鼠标单击事件对这个新创建的文本框无效;但是如果使用live进行绑定,那么新创建的文本框也会绑定鼠标单击事件。...添加过两个商品后,表格中一共有3行数据,第1行是原本存在的,后两行是动态创建并添加到表格上的。现在单击表格中的行,我们会发现只有第1行的背景色可以改变,后两行的背景色没有改变。...把bind换成live后,表格中的任何一行在单击时都可以改变背景色,包括动态创建的行。
(内容类型),一般是指网页中存在的 Content-Type 陆:processData 默认为true,当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data... 点击修改按钮触发edit方法: 根据数据表格id获取到数据表格的行数据,然后进行判断长度的行 ...PaygridPanel.on("click", "a.edit", function() { var rows = $('#dg').datagrid('getSelections'); /* 获取数据表格的行...(内容类型),一般是指网页中存在的 Content-Type 陆:processData 默认为true,当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data...id获取到数据表格的行数据,然后进行判断长度的行 判断长度>1,提示只能选择一条数据删除 判断长度=1,提示确定要删除此数据吗 var
自定义列表 标签 说明 dl 表示列表整体,只能包含dd或dt dt 列表标题 dd 列表项 表格 标签 说明 table 表格整体 tr 行 td 单元格 th 表头单元格 结构标签 标签 说明...3.name 属性用于对提交到服务器后的表单数据进行标识 4. value 为input元素设定值(默认值) 输入框的值 选项的值 按钮上的文字 5.checked 在页面加载时应该被预先选定的单选和复选选项...6. selected 规定在页面加载时预先选定的下拉列表选项 7. readonly 规定输入字段为只读(不能编辑) 8. disabled 规定应该禁用input元素(既不能编辑也不能提交)...9. maxlength 规定输入字段允许的最大长度 10. size规定下拉列表中可见选项的数目 表格: 表格标签: 1. table 表格 2. tr 行 3. td 单元格 4. th..."2">01td> //横跨两列 5.rowspan 单元格可竖跨的行数 * 写到要竖跨的单元格标签上,如:td rowspan="2">小嘟td> //竖跨两行
-->verify1.js 5、不使用jquery框架,直接使用ajax的异步对象XMLHttpRequest对象去实现ajax应用 步骤: A:创建XMLHttpRequest对象 B:注册回调函数...document).ready //$("#content").load(this.id); $("#content").load($(this).attr("id")); }); }); 3、应用案例3:编辑文本框...,修改过的值写入td,input消失, 重新单击时,又可以进入编辑状态 完善点2:文本框内容高亮显示 jQuery(function() { //绑定事件方法 //$("td").click(tdclick...(td); //td.append(input); //文本框内容高亮显示 input.get(0).select(); //取消绑定的事件 td.unbind("click"); //另一种方法 //...:使用js的css方法 G:增加键盘事件:jqueryAuto.js---》jqueryAuto1.js //定义一个当前高亮显示的节点的索引号 var highlightindex = -1; jQuery
目前超过 90% 的网站都使用了 jQuery 库,jQuery 的宗旨:写的更少,做得更多!...本地引入:将 jQuery 下载下来,然后导入项目中,使用 script 标签进行引用 jquery-1.9.1.min.js"> jquery/1.9.1/jquery.min.js"> # 1.5 jQuery 快速使用 <!...基本筛选器 需求描述:实现隔行变色,让表格的奇数行的背景变为红色,:even 代表选取下标为偶数的行 <table cellspacing="0px" cellpadding="10px" border...tr:even').css('background', 'red'); 需求描述:实现隔行变色,让表格的偶数行的背景变为红色,:odd 代表选取下标为奇数的行 <table cellspacing="
使用jQuery快速高效制作网页交互特效 第一章-JavaScript基础 上机练习1 练习——统计包含“a”或“A”的字符串的个数 需求说明:使用数组存储一组字符串,并统计包含“a”或“A”的字符串的个数...选择器 上机练习1 制作图书简介页面 需求说明: 根据提供的素材,在图书简介页面上增加jQuery代码,使用基本选择器和层次选择器,获取并设置页面元素 “自营图书几十万”……一行字体颜色为红色 京东价...; }) 上机练习4 制作隔行变色的商品列表 需求说明: 根据提供的素材,添加jQuery代码,完成效果制作,隔行变色(不包括表头)偶数行背景色为#eff7d1,奇数行背景色为...jQuery验证用户名,密码等表单数据的有效性 光标离开文本框时,验证数据的合法性,如果不符合要求则提示 提交表单时使用submit方法验证数据的合法性,根据验证函数的返回值true和false来决定是否提交表单...1)点击表格中每一列的编辑按钮 或表格中每一行的姓名列,弹出人员详细信息窗口; 2)修改弹出窗口的标题为“人员详细信息”; 3)将当前行数据信息,回显至弹出界面中对应的输入框中; 4) 数据验证通过后,
index //从零开始计数 描述 查找第二行 HTML代码 td>Header 1td> td>Value 1...; 回调函数描述 使用函数来设置所有匹配元素的内容 jQuery代码 $("p").html(function(n){ return "这个p元素的 index是:" +n; })...").text("Hello world"); 回调函数描述 使用函数来设置所有匹配元素的文本内容 jQuery代码 $("p").text(function(n){ return "这个p...用于 check/select的值 无参数描述 获取文本框的值 jQuery代码 $("input").val(); 参数val描述: 设定文本框的值 jQuery代码 $("input")....val("hello world"); 回调函数描述 设定文本框的值 jQuery代码 $(input : text.items").val(funcction(){ return this.value
jQuery的插件开发" class="item">基于jQuery的插件开发 td> td>2. NBA 2011季后赛td> td>3....NBA 2010季后赛td> td>4. NBA 2009季后赛td> td>5....border', '1px solid #0000FF'); }); 的文本框..." /> 的文本框" /> </div
超文本标记语言 超文本:指不仅仅是纯文本 还包括各种字体效果和多媒体(图片,音频,视频) 标记语言格式: 标签体 学习HTML主要学习有哪些标签 以及标签的使用方式...###创建HTML页面 ###常见的文本标签 内容标题h1-h6 align=“left/right/center”; 独占一行, 字体加粗, 自带上下间距 段落标签p 独占一行,自带上下间距...页面和文件同级目录:直接写图片名 文件在页面的上一级:…/图片名 文件在页面的下一级:文件夹名/图片名 绝对路径:访问站外资源时使用 图片盗链,节省本站资源,但有可能找不到图片(原网站的图片路径发生改变则找不到该图片...学习表单主要学习的就是表单中有哪些控件(文本框 密码框 提交按钮 单选 多选 下拉选等) ---- 练习 1.列表练习 文本框 name是对传递过去的参数做介绍 id唯一标识 value值设置文本框的值--> 名字:<input type="text" name="username" placeholder
假设具体的验证操作实现在validate函数中,那么我们可以采用如下的HTML时相应的文本框在失去焦点的时候对输入的数据实施验证。...Unobtrusive JavaScript在jQuery的验证中得到了很好的体现,接下来我们就简单地介绍一下使用jQuery进行验证的编程方式。...虽然演示jQuery验证使用一个单纯的HTML文件就可以了,但是在这里我们还是通过Visual Studio的ASP.NET MVC项目模板创建一个空的Web应用,这样做有两个目的:其一、项目在创建过程中会自动添加包含...jQuery本身及其验证插件的.js文件;其二,可以确保我们现在使用的用于验证的.js文件和ASP.NET MVC真正使用的.js文件是一致的。...对于这四个文本框对应的元素来说,其class属性在这里被用于进行验证规则的定义。
学习内容 jQuery插入DOM节点 jQuery删除DOM节点 jQuery替换DOM节点 jQuery筛选DOM节点 能力目标 能熟练使用jQuery进行节点操作 能熟练使用jQuery...节点是DOM中最基本的组成单位,每个标签、每个文本都可以看成是一个节点。本章将学习使用jQuery对DOM节点进行操作。 ...jQuery针对节点操作提供了很多函数供开发人员使用,这些函数很多比较相似,大家在使用的时候要注意区分。 ...4:价格小计 训练技能点 Ø jQuery节点操作 需求说明 按照图7.2.4所示的界面使用jQuery节点操作函数实现价格小计。...当单击【修改】按钮时,单元格中的文本信息替换为文本框;单击【确定】按钮时,文本框中的数据显示到单元格中。
能力目标 能熟练使用jQuery进行节点操作 能熟练使用jQuery进行节点筛选 本章简介 DOM是Document Object Model的缩写,即文档对象模型,它是W3C的标准规范,提供了使用...节点是DOM中最基本的组成单位,每个标签、每个文本都可以看成是一个节点。本章将学习使用jQuery对DOM节点进行操作。...jQuery针对节点操作提供了很多函数供开发人员使用,这些函数很多比较相似,大家在使用的时候要注意区分。...4:价格小计 训练技能点 Ø jQuery节点操作 需求说明 按照图7.2.4所示的界面使用jQuery节点操作函数实现价格小计。...当单击【修改】按钮时,单元格中的文本信息替换为文本框;单击【确定】按钮时,文本框中的数据显示到单元格中。
在上述代码中,我添加了一个class为container的div容器,并且包含了一个子的div元素row(行)。row div元素依次有3列。...然而默认的验证不使用Bootstrap指定的CSS。...那怎样不修改JQuery Validation插件而且使用Bootstrap内置的错误样式呢?...ASP.NET MVC包含了若干的编辑模板,当然我们也可以实现扩展。编辑模板类似于局部视图,不同的是,局部视图通过name来渲染,而编辑模板通过类型来渲染。...如下所示: 非基元类型 ASP.NET MVC能让开发者创建根据自定义DataType的编辑模板,比如自动生成多行文本框并且规定行数为3行,也是同样的操作: 添加MultilineText.
在上述代码中,我添加了一个class为container的div容器,并且包含了一个子的div元素row(行)。row div元素依次有3列。...然而默认的验证不使用Bootstrap指定的CSS。...那怎样不修改JQuery Validation插件而且使用Bootstrap内置的错误样式呢?...ASP.NET MVC包含了若干的编辑模板,当然我们也可以实现扩展。编辑模板类似于局部视图,不同的是,局部视图通过name来渲染,而编辑模板通过类型来渲染。...非基元类型 ASP.NET MVC能让开发者创建根据自定义DataType的编辑模板,比如自动生成多行文本框并且规定行数为3行,也是同样的操作: 添加MultilineText.