企业官网建设流程全解析

东四做网站,WordPress导出单页,wordpress标题代码的更改,防疫站24小时在线咨询下面直接给你最实用、最常见的扩展编辑器#xff08;custom editor#xff09;方法#xff0c;jQuery EasyUI datagrid 支持超级灵活#xff0c;复制粘贴就能用#xff0c;领导最爱的“日期选择、联动下拉、数字微调、校验框”全都有#xff01; EasyUI datagrid 默认支…下面直接给你最实用、最常见的扩展编辑器custom editor方法jQuery EasyUI datagrid 支持超级灵活复制粘贴就能用领导最爱的“日期选择、联动下拉、数字微调、校验框”全都有EasyUI datagrid 默认支持的编辑器类型直接用 type 就能text或textbox普通文本框textarea多行文本checkbox复选框options: {on:1, off:0}validatebox带校验的文本框required、email 等numberbox数字框precision 小数位combobox下拉框远程或本地数据combotree树形下拉combogrid网格下拉datebox日期选择器datetimebox日期时间选择器numberspinner数字微调上下箭头timespinner时间微调方法1最常用 - 直接用内置扩展编辑器推荐现在就用3秒出效果结合之前的行内编辑超级专业tableiddgclasseasyui-datagridtitle扩展编辑器示例stylewidth:800px;height:400pxdata-optionssingleSelect:true, fitColumns:true, onClickRow:onClickRowtheadtrthdata-optionsfield:id,width:60ID/ththdata-optionsfield:name,width:120,editor:{type:validatebox,options:{required:true}}姓名必填/ththdata-optionsfield:age,width:80,editor:{type:numberbox,options:{min:1,max:120,precision:0}}年龄/ththdata-optionsfield:birthday,width:120,editor:datebox生日/ththdata-optionsfield:sex,width:80, editor:{type:combobox,options:{valueField:value,textField:text,data:[{value:男,text:男},{value:女,text:女}],required:true}}, formatter:function(v){return v男?男:女;}性别/ththdata-optionsfield:salary,width:100,align:right,editor:{type:numberspinner,options:{min:1000,max:100000,increment:500}}薪资微调/ththdata-optionsfield:status,width:80,align:center, editor:{type:checkbox,options:{on:1,off:0}}, formatter:function(v){return v1?启用:禁用;}状态/th/tr/thead/tablescript// 行内编辑核心代码和之前一样vareditIndexundefined;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);}}}/script效果点击行进入编辑支持必填校验、日期日历、性别下拉、薪资微调、状态复选框超级流畅方法2自定义扩展新编辑器比如官方示例的 numberspinner如果内置的不够用你可以自己扩展一个新类型比如加个 colorslider 颜色选择器。// 先扩展 numberspinner 编辑器官方经典示例$.extend($.fn.datagrid.defaults.editors,{numberspinner:{init:function(container,options){varinput$(input typetext).appendTo(container);returninput.numberspinner(options);},destroy:function(target){$(target).numberspinner(destroy);},getValue:function(target){return$(target).numberspinner(getValue);},setValue:function(target,value){$(target).numberspinner(setValue,value);},resize:function(target,width){$(target).numberspinner(resize,width);}}});// 在列里直接用 type:numberspinnerth data-optionsfield:quantity,width:100,editor:{type:numberspinner,options:{min:1,max:1000}}数量/th方法3联动编辑器超级实用选省份自动加载城市// 在 onClickRow 里获取编辑器实现联动functiononClickRow(index){if(endEditing()){$(#dg).datagrid(selectRow,index).datagrid(beginEdit,index);editIndexindex;varprovEditor$(#dg).datagrid(getEditor,{index:index,field:province});varcityEditor$(#dg).datagrid(getEditor,{index:index,field:city});$(provEditor.target).combobox({onSelect:function(rec){$(cityEditor.target).combobox(reload,get_cities.php?prov_idrec.value);}});}}你现在直接复制方法1到你的页面刷新就能看到各种高级编辑器效果了结合之前的复选框 分页 行内编辑完美后台管理系统就齐活了。想要我给你一个完整的HTML示例带远程数据 多编辑器 联动下拉 保存校验或者你告诉我你想扩展什么编辑器比如“颜色选择器”、“文件上传”、“富文本”我2分钟给你写好自定义代码复制就能跑快说说你现在的需求比如“要日期时间选择器”或“联动下拉”我手把手帮你搞定5分钟内看到完美扩展效果