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"];