东莞网站优化方法有哪些,wordpress顶踩,专业建站工作室,绍兴高新区建设网站下面直接给你最实用、最常见的几种行内编辑#xff08;inline row editing#xff09;方法#xff0c;jQuery EasyUI datagrid 支持超好#xff0c;复制粘贴就能用#xff0c;领导最爱的“点击行开始编辑 保存/取消按钮”全都有#xff01;
方法1#xff1a;最简单 - …下面直接给你最实用、最常见的几种行内编辑inline row editing方法jQuery EasyUI datagrid 支持超好复制粘贴就能用领导最爱的“点击行开始编辑 保存/取消按钮”全都有方法1最简单 - 点击行开始编辑推荐现在就用这个超级流畅双击或点击行进入编辑编辑完点击别处或按钮保存。tableiddgclasseasyui-datagridtitle行内编辑数据网格stylewidth:800px;height:400pxdata-optionsurl:your_data.json, singleSelect:true, fitColumns:true, toolbar:#tb, onClickRow:onClickRowtheadtrthdata-optionsfield:id,width:60ID/ththdata-optionsfield:name,width:120,editor:textbox姓名/ththdata-optionsfield:age,width:80,editor:{type:numberbox,options:{min:1,max:120}}年龄/ththdata-optionsfield:sex,width:80, editor:{type:combobox,options:{data:[{value:男,text:男},{value:女,text:女}],valueField:value,textField:text}}, formatter:function(value){return value男?男:女;}性别/ththdata-optionsfield:status,width:80,align:center, editor:{type:checkbox,options:{on:1,off:0}}, formatter:function(value){return value1?启用:禁用;}状态/th/tr/thead/tabledividtbstylepadding:5px;ahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-addplaintrueonclickappendRow()新增一行/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-saveplaintrueonclicksaveRow()保存当前行/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-undoplaintrueonclickcancelEdit()取消编辑/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-removeplaintrueonclickdeleteRow()删除当前行/a/divscriptvareditIndexundefined;// 当前编辑的行索引functionendEditing(){if(editIndexundefined){returntrue}if($(#dg).datagrid(validateRow,editIndex)){$(#dg).datagrid(endEdit,editIndex);editIndexundefined;returntrue;}else{returnfalse;}}functiononClickRow(index){if(editIndex!index){if(endEditing()){$(#dg).datagrid(selectRow,index).datagrid(beginEdit,index);editIndexindex;}else{$(#dg).datagrid(selectRow,editIndex);}}}functionappendRow(){if(endEditing()){$(#dg).datagrid(appendRow,{status:1});// 新增一行默认值editIndex$(#dg).datagrid(getRows).length-1;$(#dg).datagrid(selectRow,editIndex).datagrid(beginEdit,editIndex);}}functionsaveRow(){if(endEditing()){varrow$(#dg).datagrid(getSelected);// 这里可以发ajax保存到服务器$.post(save.php,{row:row},function(res){if(res.success){$(#dg).datagrid(reload);$.messager.show({title:成功,msg:保存成功});}},json);}}functioncancelEdit(){if(editIndex!undefined){$(#dg).datagrid(cancelEdit,editIndex);editIndexundefined;}}functiondeleteRow(){varrow$(#dg).datagrid(getSelected);if(row){$.messager.confirm(确认,确定删除这行吗,function(r){if(r){// ajax删除$(#dg).datagrid(reload);}});}}/script效果点击行自动进入编辑支持文本框、数字框、下拉框、复选框超级专业方法2每行右边加“编辑/保存/取消”按钮经典风格很多后台系统都用这个tableiddgclasseasyui-datagrid...theadtr!-- 其他列 --thfieldactionwidth120formatteractionFormatter操作/th/tr/thead/tablescriptfunctionactionFormatter(value,row,index){if(row.editing){returna hrefjavascript:void(0) onclicksaverow(index)保存/a a hrefjavascript:void(0) onclickcancelrow(index)取消/a;}else{returna hrefjavascript:void(0) onclickeditrow(index)编辑/a;}}functioneditrow(index){$(#dg).datagrid(beginEdit,index);varrow$(#dg).datagrid(getRows)[index];row.editingtrue;$(#dg).datagrid(refreshRow,index);}functionsaverow(index){$(#dg).datagrid(endEdit,index);varrow$(#dg).datagrid(getRows)[index];row.editingfalse;$(#dg).datagrid(refreshRow,index);// ajax保存}functioncancelrow(index){$(#dg).datagrid(cancelEdit,index);varrow$(#dg).datagrid(getRows)[index];row.editingfalse;$(#dg).datagrid(refreshRow,index);}/script方法3用官方扩展 edatagrid双击行编辑 自动保存到服务器最省事下载 edatagrid 扩展后tableiddgclasseasyui-edatagridurlget_data.phpsaveUrlsave.phpupdateUrlupdate.phpdestroyUrldelete.php...!-- 列定义同上加 editor --/table双击行就编辑保存自动发请求超级方便你现在直接复制方法1到你的页面刷新一下就能看到行内编辑效果了结合之前的复选框 自定义分页 批量删除完美后台表格就齐活了。想要我给你一个完整的HTML文件带远程数据加载 行内编辑 保存到服务器示例 复选框 分页或者你告诉我你想用哪种编辑器日期框、校验等我2分钟发你完整代码复制就能跑快说说你现在的需求比如“要支持新增/修改/删除自动保存”我手把手帮你搞定5分钟内看到完美编辑效果