手机网站布局超级简历网站

手机网站布局,超级简历网站,做环保工程常用的网站,crm客户管理系统实训报告下面直接给你最实用、最常见的创建属性网格#xff08;Property Grid#xff09;方法#xff0c;也叫属性表格#xff0c;jQuery EasyUI 官方内置了 propertygrid 组件#xff0c;专门用来显示“名称-值”键值对形式的数据#xff0c;超级适合配置项、详情查看、系统参数…下面直接给你最实用、最常见的创建属性网格Property Grid方法也叫属性表格jQuery EasyUI 官方内置了propertygrid组件专门用来显示“名称-值”键值对形式的数据超级适合配置项、详情查看、系统参数、对象属性展示等场景复制粘贴就能用领导最爱的“清晰整齐、一目了然”效果全都有方法1最简单最常用 - 基本属性网格推荐现在就用这个3秒出效果tableidpgclasseasyui-propertygridtitle用户属性信息stylewidth:600px;height:400pxdata-optionsurl:user_property.json, showGroup:true, scrollbarSize:0, columns:[[ {field:name,title:属性名称,width:150,sortable:true}, {field:value,title:属性值,width:200}, {field:desc,title:描述,width:200} ]]/table对应的 JSON 数据格式user_property.json[{name:用户名,value:张三,group:基本信息,desc:登录账号},{name:真实姓名,value:张三丰,group:基本信息,desc:},{name:年龄,value:28,group:基本信息,desc:周岁},{name:邮箱,value:zhangsan.com,group:联系方式,desc:常用邮箱},{name:手机,value:13800138000,group:联系方式,desc:},{name:注册时间,value:2023-01-15 10:30:22,group:其他信息,desc:},{name:状态,value:启用,group:其他信息,desc:正常/禁用}]效果自动按group分组显示可折叠属性名称固定宽度值和描述清晰对齐支持排序、滚动超级专业方法2行内编辑属性值支持修改配置项tableidpgclasseasyui-propertygridtitle系统配置参数可编辑stylewidth:700px;height:450pxdata-optionsurl:config.json, showGroup:true, scrollbarSize:0, onClickRow:onClickRowtheadtrthdata-optionsfield:name,width:200参数名称/ththdata-optionsfield:value,width:250,editor:textbox参数值/ththdata-optionsfield:desc,width:250描述/th/tr/thead/tabledivstylepadding:5px;ahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-saveonclicksaveConfig()保存所有修改/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-undoonclickcancelAll()取消所有编辑/a/divscriptvareditRowundefined;functiononClickRow(index){if(editRow!index){if(endEditing()){$(#pg).propertygrid(beginEdit,index);editRowindex;}else{$(#pg).propertygrid(selectRow,editRow);}}}functionendEditing(){if(editRowundefined){returntrue}if($(#pg).propertygrid(validateRow,editRow)){$(#pg).propertygrid(endEdit,editRow);editRowundefined;returntrue;}else{returnfalse;}}functionsaveConfig(){if(endEditing()){varchanged$(#pg).propertygrid(getChanges);if(changed.length){// 这里可以提交到服务器console.log(修改的参数,changed);$.messager.alert(提示,保存成功共修改 changed.length 项,info);// 保存后可选择 reload// $(#pg).propertygrid(reload);}else{$.messager.alert(提示,没有修改任何项);}}}functioncancelAll(){$(#pg).propertygrid(rejectChanges);// 撤销所有修改editRowundefined;}/script方法3更高级的编辑器下拉、数字、日期等columns:[[{field:name,title:参数名称,width:180},{field:value,title:参数值,width:250,editor:function(row){if(row.name状态){return{type:combobox,options:{valueField:value,textField:text,data:[{value:启用,text:启用},{value:禁用,text:禁用}]}};}if(row.name缓存时间){return{type:numberspinner,options:{min:1,max:3600}};}if(row.name到期日期){returndatebox;}returntextbox;}},{field:desc,title:描述,width:250}]]方法4不分组 自定义分组标题样式data-options showGroup:false,// 不显示分组所有行平铺groupFormatter:function(group,rows){returnb stylecolor:#0066cc;group/b共rows.length项;}你现在直接复制方法1的代码到你的页面准备一个简单的 JSON 数据刷新一下就能看到超级专业的属性网格效果了特别适合用户详情页系统配置管理对象属性查看商品规格参数表结合之前的 datagrid 各种高级功能你的后台系统已经可以直接上线了。想要我给你一个完整的HTML示例带本地数据 可编辑 下拉/日期编辑器 保存按钮或者你告诉我你想展示什么类型的数据比如“服务器配置”“个人档案”“产品参数”我2分钟发你完美适配的代码复制就能跑快说说你的具体需求我手把手帮你搞定5分钟内看到一目了然的属性网格