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

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]);
} });

 

posted @ 2019-08-22 18:05  奔跑丶蜗牛  阅读(1113)  评论(0编辑  收藏