zoukankan      html  css  js  c++  java
  • 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" 200,height:22,label:'名称:' ,labelWidth:50,labelAlign:'right' />
                <input id="txtTel" class="easyui-textbox" data-field="UserTel" 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]);
    } });
  • 相关阅读:
    mongodb搭建
    使用systemctl管理服务
    常用命令--find
    linux中的常用信号
    bash 中的特殊变量
    tomcat开启PID文件
    django基础入门
    Redis源码编译安装
    DRF路由组件
    Django/DRF序列化
  • 原文地址:https://www.cnblogs.com/BenPaoWoNiu/p/11395993.html
Copyright © 2011-2022 走看看