企业官网建设流程全解析

网站自适应 常用尺寸,郑州seo代理外包,正规的食品行业网站开发,揭阳装修网站建设jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用 在前两个教程中#xff0c;我们分别实现了使用 dialog 弹窗 和 行内编辑 的 CRUD DataGrid。本教程将展示第三种方式#xff1a;使用 detailview#xff08;展开行明细视图#xff09;#xff0c;点击行左侧的展…jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用在前两个教程中我们分别实现了使用dialog 弹窗和行内编辑的 CRUD DataGrid。本教程将展示第三种方式使用detailview展开行明细视图点击行左侧的展开按钮在行下方显示一个完整的编辑表单。这种方式适合需要更复杂、布局更自由的编辑表单同时节省页面空间不占用额外弹窗。官方教程参考https://www.jeasyui.com/tutorial/app/crud3.phpBuild CRUD Application with edit form in expanded row details步骤 1: 引入 EasyUI 资源额外引入 detailview除了基本资源还需引入datagrid-detailview.jslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/datagrid-detailview.js/script步骤 2: 创建 DataGrid 和工具栏使用view: detailview启用展开行视图。tableiddgtitleMy Usersstylewidth:700px;height:400pxurlget_users.phptoolbar#toolbarpaginationtruefitColumnstruesingleSelecttruetheadtrthfieldfirstnamewidth50First Name/ththfieldlastnamewidth50Last Name/ththfieldphonewidth50Phone/ththfieldemailwidth80Email/th/tr/thead/tabledividtoolbarahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-addplaintrueonclicknewItem()New User/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-removeplaintrueonclickdestroyItem()Remove User/a/div步骤 3: JavaScript 实现展开行编辑表单核心是通过detailFormatter返回一个容器 divonExpandRow事件中加载表单可从服务器 AJAX 加载或直接内联。scripttypetext/javascript$(function(){$(#dg).datagrid({view:detailview,detailFormatter:function(index,row){returndiv classddv/div;},onExpandRow:function(index,row){varddv$(this).datagrid(getRowDetail,index).find(div.ddv);ddv.panel({height:120,border:false,cache:false,href:show_form.php?indexindex,// 可选从服务器加载表单onLoad:function(){// 加载行数据到表单$(#dg).datagrid(fixDetailRowHeight,index);$(#dg).datagrid(selectRow,index);ddv.find(form).form(load,row);}});$(#dg).datagrid(fixDetailRowHeight,index);}});});functionnewItem(){$(#dg).datagrid(appendRow,{isNewRecord:true});varindex$(#dg).datagrid(getRows).length-1;$(#dg).datagrid(expandRow,index);$(#dg).datagrid(selectRow,index);}functiondestroyItem(){varrow$(#dg).datagrid(getSelected);if(row){$.messager.confirm(Confirm,确定删除此用户吗,function(r){if(r){$.post(remove_user.php,{id:row.id},function(result){if(result.success){$(#dg).datagrid(reload);}else{$.messager.show({title:Error,msg:result.errorMsg});}},json);}});}}functionsaveItem(index){varrow$(#dg).datagrid(getRows)[index];varurlrow.isNewRecord?save_user.php:update_user.php?idrow.id;$(#dg).datagrid(getRowDetail,index).find(form).form(submit,{url:url,onSubmit:function(){return$(this).form(validate);},success:function(data){dataeval((data));data.isNewRecordfalse;$(#dg).datagrid(collapseRow,index);$(#dg).datagrid(updateRow,{index:index,row:data});}});}functioncancelItem(index){varrow$(#dg).datagrid(getRows)[index];if(row.isNewRecord){$(#dg).datagrid(deleteRow,index);}else{$(#dg).datagrid(collapseRow,index);}}/script步骤 4: 编辑表单示例show_form.php 或内联表单放在展开行中支持更复杂的布局!-- show_form.php 返回的内容 --formmethodposttableclassdv-tablestylewidth:100%;background:#fafafa;padding:5px;trtdFirst Name/tdtdinputnamefirstnameclasseasyui-textboxrequiredtrue//tdtdLast Name/tdtdinputnamelastnameclasseasyui-textboxrequiredtrue//td/trtrtdPhone/tdtdinputnamephoneclasseasyui-textbox//tdtdEmail/tdtdinputnameemailclasseasyui-textboxvalidTypeemail//td/tr/tabledivstylepadding:5px;text-align:right;ahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-saveonclicksaveItem({{index}})Save/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-cancelonclickcancelItem({{index}})Cancel/a/div/form注如果使用 href 加载需在 PHP 中替换 {{index}} 为实际 index关键说明新增appendRow 并标记isNewRecord展开行进入编辑。编辑用户点击 展开行表单加载当前行数据。保存提交表单成功后折叠行并更新 DataGrid 数据。取消如果是新行则删除否则折叠。删除选中行后删除支持确认。优势编辑表单布局自由可添加更多字段、tab 等复杂控件。更多示例官方展开行 CRUDhttps://www.jeasyui.com/tutorial/app/crud3.php展开行显示子网格https://www.jeasyui.com/tutorial/datagrid/datagrid22.php如果需要完整 ZIP 下载、服务器端 PHP 示例、或自定义表单布局请提供更多要求