2455人阅读
EasyUI（6）
下面这个是一个单独的js文件,可以直接在页面引入他就可以用了
主要有三种方式实现
1.直接双击选中编辑
2.选中行点击修改按钮编辑
3.右键选择相关的操作
可能中间有部分功能没有实现
&%@ page language=&java& import=&java.util.*& pageEncoding=&utf-8&%&
&!-- 引入自定义的js文件 --&
&script type=&text/javascript& src=&${pageContext.request.contextPath}/js/Myutil.js&&&/script&
&script type=&text/javascript&&
$(function() {
editRow = //保存当前正在编辑的行,控制同一时间只开启一行
$('#datagrid').datagrid({
rowStyler : function(rowIndex,rowData){
(rowData.name);
if(rowData.name == '张三丰'){
return '';
//让张三丰这一行不显示样式
return 'background-color:#6293BB;
font-weight: height:150px';
//url和columns属性必须要有
//后台响应数据的地址,返回JSON字符串来填充grid
url : '${pageContext.request.contextPath}/student/all',
title : '学生列表',
iconCls : 'icon-save',
pagination : true, //分页工具条
pageSize : 10, //每页显示的大小,联合pageList一起用
pageList : [ 10, 20, 30, 40 ],
fit : true, //随着里里面的宽高自适应
fitColumns : false, //设置成true填充满整个grid的宽,列多时设置为false,grid太窄时有横向滚动条
nowarp : false, //一行内容太长时可以自动换行全部显示出来
border : false,
idField : 'id', //通过主键找到对应的记录
sortName : 'name', //默认用name来进行排序
sortOrder : 'desc', //排序的种类
frozenColumns: [ [ {
//冻结列,此时fitColumns不能设置成true,否则没有效果
title : '',
field : '',
width : 50 ,
//json对象返回的属性要对应
checkbox : true
//在前面有个选项框
title : '编号',
field : 'id',
//json对象返回的属性要对应
width : 100,
//必须给,否则列不显示
sortable : true , //设置在哪里表示可以用此列排序
align : 'center'
//让编号列居中显示
columns : [ [ {
title : '用户名',
field : 'name',
width : 200,
align : 'center' ,
sortable : true ,
//设置在哪里表示可以用此列排序
editor : {
//让用户名列变成可编辑且数据必填
type : 'validatebox' ,
//让编辑框变成那种样
options : {
required : true
//当类容较长时,鼠标移上去将全部显示出来,此函数必须要换回一个字符串,返回的字符串替换当前的值
formatter : function(value,rowData,rowIndex){
//height可以设置列高
return '&div
style=&height:50px& title=&'+value+'&&'+value+'&/div&';
//利用html方式实现
title : '密码',
field : 'password',
width : 200 ,
editor : {
type : 'validatebox' ,
options : {
required : true
formatter : function(value,rowData,rowIndex){
return '******';
//将密码用*显示
align : 'center'
title : '创建时间',
field : 'createtime',
width : 200,
sortable : true ,
editor : {
type : 'datetimebox' ,
//自定义的类型
options : {
required : true
align : 'center'
title : '操作',
field : 'cz',
width : 130,
formatter : function(value,rowData,rowIndex){
return '&button onclick=&show('+rowIndex+');&&编辑&/button&&button&删除&/button&';
align : 'center'
}] ], //用两个中括号可以合并单元格
toolbar : [ { //添加一排按钮
text : '增加',
iconCls : 'icon-add',
handler : function() {
if(editRow != undefined ){
$('#datagrid').datagrid('endEdit',editRow);
//避免同时开启多个编辑行
if(editRow == undefined){
/*$('#datagrid').datagrid('appendRow',{
//在当前页末尾添加一行
id : 'ww' ,
name : '' ,
password : '' ,
createtime : ''
var rows = $('#datagrid').datagrid('getRows');
//得到当前页的所有行
$('#datagrid').datagrid('beginEdit',rows.length - 1 );
//让添加的这一行开启编辑状态,索引从0开始
//调用自己添加的方法,让添加用户时密码可以编辑,创建时间不可编辑
changeEditorAddRow();
$('#datagrid').datagrid('insertRow',{
index : 0 ,
//添加到第一行
name : '请输入用户名' ,
password : '请输入密码' ,
createtime : '请选择时间'
$('#datagrid').datagrid('beginEdit' ,0);
//让添加的第一行开启编辑状态
editRow = 0 ; //记录当前编辑行的索引
}, '-', {
text : '删除',
iconCls : 'icon-remove',
handler : function() {
var rows = $('#datagrid').datagrid('getSelections');
//得到所选择的行
if(rows.length & 0){
$.messager.confirm('请确认','您确定要删除当前所选中的项目吗?',function(b){
var ids = [] ;//传给后台的id集合
for(var i = 0;i & rows. i++){
ids.push(rows[i].id);
//拼接所选中的id
url : '${pageContext.request.contextPath}/student/delete' ,
ids : ids.join(',')
//将数组转换成一个以逗号分割的字符串传给后台
type : 'post',
dataType : 'json' ,
success : function(r){
if(r && r.flag){
$('#datagrid').datagrid('load'); //删除后刷新页面
$('#datagrid').datagrid('unselectAll'); //避免系统还在选中状态,下次删除新的数据出错
$.messager.show({
title : '提示',
msg : r.msg
$.messager.alert('错误','删除失败' ,'error');
$.messager.alert('提示','请选择要删除的记录','warning');//这里提示一个警告
}, '-', {
text : '修改', //'-',是一个分隔符
iconCls : 'icon-edit',
handler : function() {
var rows = $('#datagrid').datagrid('getSelections');
//得到所选择的行
if(rows.length == 1){
changeEditorEditRow();
if(editRow != undefined ){
//先判断双击前有没有在编辑的行
$('#datagrid').datagrid('endEdit',editRow);
//避免同时开启多个编辑行
if(editRow == undefined){
var index =
$('#datagrid').datagrid('getRowIndex' ,rows[0]);//得到选择行的索引
$('#datagrid').datagrid('beginEdit' ,index);
//记录当前开启编辑的行
//在开启编辑状态时取消它的选择状态,这样就可以在修改时放弃修改当前行去修改其他行
$('#datagrid').datagrid('unselectAll');
}, '-', {
text : '保存', //'-',是一个分隔符
iconCls : 'icon-save',
handler : function() {
$('#datagrid').datagrid('endEdit',editRow);
}, '-' , {
text : '取消编辑', //'-',是一个分隔符
iconCls : 'icon-redo',
handler : function() {
$('#datagrid').datagrid('rejectChanges'); //调用回滚方法
$('#datagrid').datagrid('unselectAll');
}, '-', {
text : '清空dataGrid', //'-',是一个分隔符
iconCls : 'icon-undo',
handler : function() {
$('#datagrid').datagrid('loadData',[]);
onAfterEdit : function(rowIndex,rowData,changes){
//在提交编辑行后自动执行事件,自动封装数据
//(rowData);
//rowData刚结束编辑的哪一行数据,返回的是一个数组
//(changes);
//changes是改变的数据
var inserted = $('#datagrid').datagrid('getChanges','inserted'); //得到插入的数据
var updated = $('#datagrid').datagrid('getChanges','updated');
//得到修改的数据
//即没有选择添加也没有选择修改就直接return结束,不往下面走了
不然url提交地址为空
if(inserted.length & 1 && updated.length & 1){
datagrid.datagrid('unselectAll');
var url = '';
if(inserted.length & 0){
//表示点击的添加按钮
url = '${pageContext.request.contextPath}/student/insert' ;
if(updated.length & 0){
//表示点击的添加按钮
url = '${pageContext.request.contextPath}/student/update' ;
url : url ,
data : rowData ,
dataType : 'json' ,
success : function(r){
if(r && r.flag){
$('#datagrid').datagrid('acceptChanges');
//后台添加成功后,前台保持同步,即不能&反悔&
$('#datagrid').datagrid('load'); //添加后刷新页面
$.messager.show({
msg : r.msg ,
title : '成功'
$('#datagrid').datagrid('rejectChanges');
//添加失败自动取消编辑框,回滚到前一个状态
$.messager.alert('错误', r.msg ,'error');
$('#datagrid').datagrid('unselectAll'); //取消选中,避免出现黄色条
//(inserted);
//(updated);
//直接双击修改
onDblClickRow : function(rowIndex,rowData){
//双击行触发事件
changeEditorEditRow(); //调用方法
if(editRow != undefined ){
//先判断双击前有没有在编辑的行
$('#datagrid').datagrid('endEdit',editRow);
//避免同时开启多个编辑行
if(editRow == undefined){
$('#datagrid').datagrid('beginEdit' ,rowIndex);
editRow = rowI //记录当前编辑行的索引
//datagrid的右键事件,右键显示一个菜单,三个参数是事件自带的
onRowContextMenu : function(e, rowIndex, rowData){
e.preventDefault();
//阻止浏览器右键默认的事件
$(this).datagrid('unselectAll');
//先取消所有的选中,避免同一时间右键选中多行
$(this).datagrid('selectRow',rowIndex);
//选中右键的这一行
$('#menu').menu('show', {
left : e.pageX,
//让菜单位置跟着鼠标位置的改变而移动
top : e.pageY
//调用Myutil的方法将form表单元素的值序列化成对象,否则传过去的是字符串
sel = function(){
student_searchForm = $('#student_searchForm').form();
(serializeObject(student_searchForm));
$('#datagrid').datagrid('load',serializeObject(student_searchForm));
cle = function(){
$('#datagrid').datagrid('load',{});
//此时后台接受到的过滤条件为空,将显示全部的数据
student_searchForm = $('#student_searchForm').form().find('input').val('');
//添加行时改变editor,password可编辑,创建时间不可编辑
changeEditorAddRow = function(){
$('#datagrid').datagrid('addEditor',{
field : 'password' ,
//名称需要对应
editor : {
type : 'validatebox' ,
//让编辑框变成那种类型
options : {
required : true
//让创建时间不可编辑,多个时用数组['createtime',''....]
$('#datagrid').datagrid('removeEditor','createtime');
//修改行时改变editor,密码不可编辑,创建时间开启可编辑状态
changeEditorEditRow = function(){
$('#datagrid').datagrid('removeEditor','password');
$('#datagrid').datagrid('addEditor',{
field : 'createtime' ,
editor : {
type : 'datetimebox' ,
//自定义的类型
options : {
required : true
//$('.datagrid-header div').css('textAlign','center');
//让表头居中
//点击控制列的编辑按钮执行的方法
function show(i){
var rows =
$('#datagrid').datagrid('getRows'); //得到当前页的所有行的数据,是一个数组
(rows[i]);
//得到第i+1行的那么属性值
&div class=&easyui-tabs& fit=&true& border=&false&&
&div title=&学生管理& border=&false&&
&div class=&easyui-layout& fit=&true& border=&false&&
&div region=&north& title=&过滤查询& border=&false& style=&height:100overflow:&&
&form id=&student_searchForm&&
&table class=&tableForm datagrid-toolbar& style=&width:100%;height:100%&&
&tr style=&width:100&&
&th &用户名&/th&
&td&&input id=&name& name=&name& style=&width:150&/&&/td&
&th&创建时间&/th& &!-- editable=&false&表示不能手动输入信息 --&
&input name=&createtimeStart& class=&easyui-datetimebox& editable=&false& style=&width:100&/&至
&input name=&createtimeEnd& class=&easyui-datetimebox& editable=&false& style=&width:100&/&
&a href=&javascript:void(0);& class=&easyui-linkbutton& onclick=&sel();&&查询&/a&
&a href=&javascript:void(0);& class=&easyui-linkbutton& onclick=&cle();&&清空&/a&
&div region=&center& border=&false&&
&table id=&datagrid& &&/table&
&!-- 右键弹出一个菜单需要先建立一个菜单 --&
&div id=&menu& class=&easyui-menu& style=&width:120 display:&&
&div onclick=&& iconCls=&icon-add&&增加&/div&
&div onclick=&& iconCls=&icon-remove&&删除&/div&
&div onclick=&& iconCls=&icon-edit&&编辑&/div&
新增就能编辑：
&!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN&&
&title&工艺流程&/title&
&meta http-equiv=&pragma& content=&no-cache&&
&meta http-equiv=&cache-control& content=&no-cache&&
&meta http-equiv=&expires& content=&0&&
&meta http-equiv=&keywords& content=&keyword1,keyword2,keyword3&&
&meta http-equiv=&description& content=&This is my page&&
&%@ include file=&/WEB-INF/def/web/include/head.jsp&%&
&body class=&easyui-layout& id=&divform& style=&display:none&&
&!-- 信息列表 --&
&table id=&dg& class=&easyui-datagrid& style=&width:100%& toolbar=&#tb&
rownumbers=&true& singleSelect=&true& idField=&invtypeid&
url=&/cm/pub/tech/l&&
&th data-options=&field:'techname',width:200&
editor=&{type:'textbox'}&&工艺流程名称&/th&
&th data-options=&field:'memo',width:200& editor=&{type:'textbox'}&&备注&/th&
&th data-options=&field:'operupd',width:100& align=&center&
formatter=&formatAction&&操作&/th&
&div id=&tb&&
&a href=&javascript:void(0)& target=&_blank& class=&easyui-linkbutton&
iconCls=&icon-add& plain=&true& onclick=&appendrow();&&新增&/a&
&!-- 删除对话框 --&
&%@ include file=&/WEB-INF/def/web/include/delmsg.jsp&%&
&script language=&javascript&&
$('#divform').css(&display&, &&);
$(&#dg&).css(&height&, $(window).height());
//初始表格
$('#dg').datagrid({
onBeforeEdit : function(index, row) {
row.editing =
updateActions(index);
onAfterEdit : function(index, row) {
row.editing =
updateActions(index);
onCancelEdit : function(index, row) {
row.editing =
updateActions(index);
function updateActions(index) {
$('#dg').datagrid('updateRow', {
index : index,
//添加修改和删除
function formatAction(value, row, index) {
if (row.editing) {
var e = &&a href='javascript:void(0)' onclick='saverow(& + index
+ &)'&确认&/a&  &;
var d = &&a href='javascript:void(0)' onclick='cancelrow(& + index
+ &)'&取消&/a&&;
return e +
var e = &&a href='javascript:void(0)' onclick='editrow(& + index
+ &)'&编辑&/a&  &;
var d = &&a href='javascript:void(0)' onclick='deleterow(\&&
+ row.invtypeid + &\&)'&删除&/a&&;
return e +
//新增行即可编辑
function appendrow() {
$('#dg').datagrid('appendRow', {
techid : ''
var rows = $('#dg').datagrid('getRows');
$('#dg').datagrid('beginEdit',rows.length - 1 );
//开始编辑
function editrow(index) {
$('#dg').datagrid('beginEdit', index);
//编辑取消
function cancelrow(index) {
$('#dg').datagrid('cancelEdit', index);
//数据保存
function saverow(index) {
$('#dg').datagrid('endEdit', index);
var row = $('#dg').datagrid('getData').rows[index];
var techname = row.
//var memo = row.
if (techname == &&) {
$.messager.alert('提示信息', &请你填写工艺流程名称&);
var rows1 = $('#dg').datagrid('getRows');
var length = rows1.
for (var i = 0; i & length - 1; i++) {
var row2 = rows1[i];
var _techname = undefined2empty(row2.techname);
if (techname == _techname && index != i) {
$.messager.alert('提示信息', &工艺流程名称不可以重复 请重新输入&);
editrow(index);
//var para = &invtypeid=&+undefined2empty(invtypeid)+&&invtypename=&+
$.getJSON(&/cm/pub/tech/s&, function(data) {
if (data.errcode == &&) {
$.messager.alert('提示信息', &保存成功!&);
row.invtypeid = data.list[0];
if (data.list[1] != null) {
row.invtypecode = data.list[1];
$('#dg').datagrid('reload', index);
$.messager.alert('提示信息', data.errmsg);
//数据删除
function deleterow(billid) {
var index = $('#dg').datagrid(&getRowIndex&, billid);
if (billid == undefined) {
$('#dg').datagrid('cancelEdit', index);
$('#dg').datagrid('deleteRow', index);
delbillid =
delindex =
$('#dlg').dialog('open');
$('#dlg').html(&确定要删除此记录吗？&);
//删除选择
function delexcute() {
$('#dlg').dialog('close');
$.getJSON(&/cm/pub/tech/d?techid=& + delbillid, function(data) {
if (data.errcode == &&) {
$.messager.alert('提示信息', &删除成功!&);
$('#dg').datagrid('deleteRow', delindex);
$.messager.alert('提示信息', data.errmsg);
&/script&新增行编辑：
另一种方式待验证：
appendRow后获取添加行的index，调用beginEdit
var index=$('#FlowList').datagrid('appendRow', {
FlowTypeName: 'new name',
FlowTypeCode: 30
}).datagrid('getRows').length-1;
$('#FlowList').datagrid('beginEdit',index)
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：59155次
积分：1544
积分：1544
排名：千里之外
原创：89篇
转载：66篇
(1)(1)(1)(1)(11)(53)(1)(34)(5)(4)(30)(8)(1)(2)(3)动态添加一个文本框并带有删除按钮_javascript_ThinkSAAS
动态添加一个文本框并带有删除按钮
动态添加一个文本框并带有删除按钮
内容来源： 网络
动态添加一个文本框并带有删除按钮:在实际操作中可能需要动态的创建和删除一个元素，比较常见的就是动态的添加一个文本框和一个删除按钮，点击删除按钮可以删除相应的文本框，下面就结合一个实例详细介绍一下如何实现此效果。代码实例如下:
&!DOCTYPE html& 
&html& 
&head& 
&meta charset=" utf-8"& 
&meta name="author" content="/" /&
&head&
&title&添加和删除文本框-蚂蚁部落&/title&
&style type="text/css"&
list-style:none
&/style&
&script type="text/javascript"&
window.onload=function(){
var main=document.getElementById("main");
var bt=document.getElementById("bt");
bt.onclick=function(){
var len=main.getElementsByTagName("li").
var oul=main.getElementsByTagName("ul")[0];
var oli=document.createElement("li");
var input=document.createElement("input");
var button=document.createElement("input");
input.id="id"+
input.type="text";
button.type="button";
button.id="bt"+
button.value="点击删除";
oli.appendChild(input);
oli.appendChild(button);
oul.appendChild(oli);
button.onclick=function(){
button.parentNode.remove(button.parentNode);
&/script&
&/head&
&body&
&input type="button" value="点击添加一项" id="bt" /&
&div id="main"&
&li&&input type="text"&&/li&
&/div&
&/body&
&/html&
以上代码实现了我们的需求，可以点击动态生成和删除文本框，下面就介绍一下实现过程。一.实现原理:为添加按钮注册事件处理函数，点击的时候将动态的创建文本框和删除按钮，然后为创建的删除按钮注册事件处理函数，点击的时候就会删除当前按钮所在的li元素，就这么简单。二.代码注释:1.window.onload=function(){}，文档加载完毕再去执行函数中的代码。2.var main=document.getElementById("main")，获取id属性值为main的元素。3.var bt=document.getElementById("bt")，获取id属性值为bt的元素。4.bt.onclick=function(){}，为bt绑定事件处理函数。5.var len=main.getElementsByTagName("li").length，获取main下面li元素的数目。6.var oul=main.getElementsByTagName("ul")[0]，获取main下面的第一个ul元素。7.var oli=document.createElement("li")，创建一个li元素。8.var input=document.createElement("input"),创建一个input元素。9.input.id="id"+len，设置input对象的id属性值，不设置这里也么什么影响。10.input.type="text"，将input的type属性设置为text，也就是文本框。11.button.type="button"，将一个创建的input元素的type属性值设置为button，即创建一个按钮。12.button.id="bt"+len，设置id属性值，不设置也没关系。13.button.value="点击删除"，设置按钮的value属性值。14.oli.appendChild(input)，为li元素添加文本框。15.oli.appendChild(button)，为li元素添加按钮。16.oul.appendChild(oli)，为ul元素添加li。17.button.onclick=function(){}，为当前创建的删除按钮绑定事件处理函数。18.button.parentNode.remove(button.parentNode)，删除当前按钮所在的li元素。
原文地址是:/forum.php?mod=viewthread&tid=8308
更多内容可以参阅:/javascript/
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信}