EasyUi表单取值,表单赋值,非官方form提交,可轻松扩展 ゞ 浴缸里的玫瑰 2023-08-27 08:36 10839阅读 0赞 **1、表单取值** 我们指定一个dom属性的值来标志每个文本框对应的接口字段,本文这里使用 data-field 自定义属性,也可以使用name属性,都可以。 html:指定data-field属性的值 <body> <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'center',border: false"> <input id="txtName" class="easyui-textbox" data-field="UserName" width:200,height:22,label:'名称:' ,labelWidth:50,labelAlign:'right' /> <input id="txtTel" class="easyui-textbox" data-field="UserTel" width:200,height:22,label:'电话:' ,labelWidth:50,labelAlign:'right' /> </div> </div> </body> js:自动获取所有文本框,并组成json数据 // 定义变量 var formData = {}; // 获取表单所有字段和相应值 装填到formData变量中 var fields = $("[data-field]"); fields.each(function (index, item) { if ($(item).hasClass("textbox-f")) { $(item).next().find(".textbox-value").each(function (index2, item2) { // 根据dom节点的自定义属性[data-field]来定义json对象的字段名 formData[item.dataset.field] = item2.value; // 若组件为combobox或combo或combogrid或combotreegrid则会获取到所选项的value值,非text值 }); } else { // 若不是easyui组件,则获取原生标签的值 formData[item.dataset.field] = item.value; } }); $.ajax({ url: 'FkdzService.ashx', type: 'post', async: true, dataType: 'json', data: formData, success: function (result, status, xmlHttpRequest) { }, error: function (status) { }, complete: function (xmlHttpRequest, status) { } }); **2、表单赋值** //示例数据 var main = { UserName: "蜗牛", UserTel: "10086" }; //表单赋值 $("[data-field]").each(function (index, item) { if ($(item).hasClass("combobox-f")) { //combobox $(item).combobox("setValue", main[item.dataset.field]); } else if ($(item).hasClass("textbox-f")) { //textbox $(item).textbox("setValue", main[item.dataset.field]); } else { //原生标签 $(item).val(main[item.dataset.field]); } }); 转载于:https://www.cnblogs.com/BenPaoWoNiu/p/11395993.html
还没有评论,来说两句吧...