EasyUi表单取值，表单赋值，非官方form提交，可轻松扩展

ゞ浴缸里的玫瑰 2023-08-27 08:36 10915阅读 0赞

**1、表单取值**

我们指定一个dom属性的值来标志每个文本框对应的接口字段，本文这里使用 data-field 自定义属性，也可以使用name属性，都可以。

html：指定data-field属性的值

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