easyui表单构造

说起javascript框架，现在可是AngularJS，vue,react横行的时代，其实jqueyr旗下的easyui也很好用的哦。

接着前面的来，使用easyui做页面，恐怕离不开提交数据，用easyui构造一个提交数据表单和普通html页面很类似。

首先无非是引入jquery和easyui

这个也简单，这个估计大家都能看懂了

<link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css"/>  

<link rel="stylesheet" type="text/css" href="../js/themes/icon.css"/>  

<link rel="stylesheet" type="text/css" href="../js/themes/demo.css"/>

<script type="text/javascript" src="../js/EasyUI/jquery-1.8.0.min.js"></script>  

<script type="text/javascript" src="../js/EasyUI/jquery.easyui.min.js"></script>  

<script type="text/javascript" src="../js/EasyUI/easyui-lang-zh_CN.js"></script>

下面就是表单代码

 <div id="dlg" class="easyui-dialog" data-options="iconCls:'icon-search',modal:true,title:'数据管理',closed:true,buttons:'#dlg-buttons'" style="width:590px;height:200px">
      <form id="fm" method="post" action="../data/Data.ashx">  
        <input type="text" id="Id" name="Id" class="hidden"/>
        <div class="item">
             <label class="noblank">描述:</label>  
             <input id="Desc" class="easyui-validatebox" name="Desc" style="width:425px;"/>  
        </div>
          <div class="item">
            <label class="noblank">密码:</label>  
            <input id="Pwd" class="easyui-validatebox" name="Pwd" style="width:160px;"/> 
            <label class="lab">状态:</label>
            <select id="Flag" name="Flag" class="easyui-combobox" style="width:165px;">  
                <option value="0">是</option> 
                <option value="1">否</option>  
            </select>  
        </div>
        <div class="item">
            <label class="noblank">开始时间:</label>  
            <input id="sDate" class="easyui-datetimebox" name="sDate" style="width:165px;" data-options="required:'true'"/> 
            <label class="noblank">截止时间:</label>  
            <input id="eDate" class="easyui-datetimebox" name="eDate" style="width:165px;" data-options="required:'true'"/> 
        </div>
        </form>  
     </div>
     <div id="dlg-buttons">  
          <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="Save();">保存</a>  
          <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="Close();">取消</a>
     </div>

当然，初始化的时候，我们可以给表单某个控件赋值

 function init() {
            $('#dlg').dialog("open"); //easyui-dialog 默认状态是关闭的
            $("#sDate").datetimebox('setValue', '2019-09-09');
        };

获取某个控件的值

function QueryData() {
            var sDate = $('#txtStartDate').datebox("getValue");
            alert(sDate );
 };

提交表单j就是jquery提交，

function Save() {
   //数据有效性检测

  var Desc = $('#Desc');
  var Id   = $('#Id');

  var data = {"Id":Id,"Desc":Desc};

  $.post("./data/data.ashx",data:data);

};

至于后台可以用java ， C# ，php

c# 代码     string Desc  = HttpContext.Current.Request.Form["Desc"];