基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用

//必输项：
 <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input>
//格式的验证：
 <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'"></input>
 <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'url'"></input>
//长度范围的验证：
 <input class="easyui-validatebox" data-options="validType:'length[1,3]'"> 

      $("#btnLogin").click(function () {
        var postData = {
          UserName: $("#UserName").val(),
          Password: $("#Password").val(),
          Code: $("#Code").val()
        }; 

  $('#type_PID1').combobox({
        url: '/DictType/GetDictJson',
        valueField: 'Value',
        textField: 'Text'
      }); 

 <tr>
            <th>
              <label>数据分开方式：</label>
            </th>
            <td>
              <input name="SplitType" type="radio" class="easyui-validatebox" checked="checked" required="true" value="Split">分隔符方式，多个数据中英文逗号，分号，斜杠或顿号[, ， ; ； / 、]分开，或一行一个　
              <br />
              <input name="SplitType" type="radio" class="easyui-validatebox" required="true" value="Line">一行一个记录模式，忽略所有分隔符号
            </td>
          </tr> 

 <select id="cc" style="width:150px"></select>
  <div id="sp">
    <div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div>
    <input type="radio" name="lang" value="01"><span>Java</span><br/>
    <input type="radio" name="lang" value="02"><span>C#</span><br/>
    <input type="radio" name="lang" value="03"><span>Ruby</span><br/>
    <input type="radio" name="lang" value="04"><span>Basic</span><br/>
    <input type="radio" name="lang" value="05"><span>Fortran</span>
  </div>
  <script type="text/javascript">
    $(function(){
      $('#cc').combo({
        required:true,
        editable:false
      });
      $('#sp').appendTo($('#cc').combo('panel'));
      $('#sp input').click(function(){
        var v = $(this).val();
        var s = $(this).next('span').text();
        $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
      });
    });
  </script> 

 <select id="cc" style="width:150px"></select>
<div id="sp">
<div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div>
<input type="radio" name="lang" value="01"><span>Java</span><br/>
<input type="radio" name="lang" value="02"><span>C#</span><br/>
<input type="radio" name="lang" value="03"><span>Ruby</span><br/>
<input type="radio" name="lang" value="04"><span>Basic</span><br/>
<input type="radio" name="lang" value="05"><span>Fortran</span>
</div>
<script type="text/javascript">
$(function(){
$('#cc').combo({
required:true,
editable:false
});
$('#sp').appendTo($('#cc').combo('panel'));
$('#sp input').click(function(){
var v = $(this).val();
var s = $(this).next('span').text();
$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
});
});
</script> 

<select id="Visible1" name="Visible">
     <option value="true" selected>正常</option>
     <option value="false">不可见</option>
 </select> 

<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
      data-options="singleSelect:true,collapsible:true,url:'../datagrid/datagrid_data1.json'">
    <thead>
      <tr>
        <th data-options="field:'itemid',width:80">Item ID</th>
        <th data-options="field:'productid',width:100">Product</th>
        <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
        <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
        <th data-options="field:'attr1',width:250">Attribute</th>
        <th data-options="field:'status',width:60,align:'center'">Status</th>
      </tr>
    </thead>
  </table> 

<table id="grid" style="width: 1024px" title="用户操作" iconcls="icon-view">      
      </table> 

 //实现对DataGird控件的绑定操作
    function InitGrid(queryData) {
      $('#grid').datagrid({  //定位到Table标签，Table标签的ID是grid
        url: '/Menu/FindWithPager',  //指向后台的Action来获取当前菜单的信息的Json格式的数据
        title: '功能菜单',
        iconCls: 'icon-view',
        height: 650,
        width: function () { return document.body.clientWidth * 0.9 },
        nowrap: true,
        autoRowHeight: false,
        striped: true,
        collapsible: true,
        pagination: true,
        pageSize: 100,
        pageList: [50,100,200],
        rownumbers: true,
        //sortName: 'ID',  //根据某个字段给easyUI排序
        sortOrder: 'asc',
        remoteSort: false,
        idField: 'ID',
        queryParams: queryData, //异步查询的参数
        columns: [[
          { field: 'ck', checkbox: true },  //选择
           { title: '显示名称', field: 'Name', width: 200},
           { title: '图标', field: 'Icon', width: 150 },
           { title: '排序', field: 'Seq', width: 80 },
           { title: '功能ID', field: 'FunctionId', width: 80 },
           { title: '菜单可见', field: 'Visible', width: 80 },
           { title: 'Winform窗体类型', field: 'WinformType', width: 400 },
           { title: 'Web界面Url地址', field: 'Url', width: 200 },
           { title: 'Web界面的菜单图标', field: 'WebIcon', width: 120 },
           { title: '系统编号', field: 'SystemType_ID', width: 80 }
        ]],
        toolbar: [{
          id: 'btnAdd',
          text: '添加',
          iconCls: 'icon-add',
          handler: function () {
            ShowAddDialog();//实现添加记录的页面
          }
        }, '-', {
          id: 'btnEdit',
          text: '修改',
          iconCls: 'icon-edit',
          handler: function () {
            ShowEditOrViewDialog();//实现修改记录的方法
          }
        }, '-', {
          id: 'btnDelete',
          text: '删除',
          iconCls: 'icon-remove',
          handler: function () {
            Delete();//实现直接删除数据的方法
          }
        }, '-', {
          id: 'btnView',
          text: '查看',
          iconCls: 'icon-table',
          handler: function () {
            ShowEditOrViewDialog("view");//实现查看记录详细信息的方法
          }
        }, '-', {
          id: 'btnReload',
          text: '刷新',
          iconCls: 'icon-reload',
          handler: function () {
            //实现刷新栏目中的数据
            $("#grid").datagrid("reload");
          }
        }],
        onDblClickRow: function (rowIndex, rowData) {
          $('#grid').datagrid('uncheckAll');
          $('#grid').datagrid('checkRow', rowIndex);
          ShowEditOrViewDialog();
        }
      })
    }; 

  //绑定查询按钮的的点击事件
    function BindSearchEvent() {
      //按条件进行查询数据，首先我们得到数据的值
      $("#btnSearch").click(function () {
        //得到用户输入的参数，取值有几种方式：$("#id").combobox('getValue'), $("#id").datebox('getValue'), $("#id").val()
        //字段增加WHC_前缀字符，避免传递如URL这样的Request关键字冲突
        var queryData = {
          WHC_ID: $("#txtID").val(),
          WHC_Name: $("#txtName").val(),
          WHC_Icon: $("#txtIcon").val(),
          WHC_Seq: $("#txtSeq").val(),
          WHC_FunctionId: $("#txtFunctionId").val(),
          WHC_Visible: $("#txtVisible").val(),
          WHC_WinformType: $("#txtWinformType").val(),
          WHC_Url: $("#txtUrl").val(),
          WHC_WebIcon: $("#txtWebIcon").val(),
          WHC_SystemType_ID: $("#txtSystemType_ID").val()
        }
        //将值传递给
        InitGrid(queryData);
        return false;
      });
    } 

  columns: [[
          { field: 'ck', checkbox: true },  //选择
           { title: '显示名称', field: 'Name', width: 200},
           { title: '图标', field: 'Icon', width: 150 },
           { title: '排序', field: 'Seq', width: 80 },
           { title: '功能ID', field: 'FunctionId', width: 80 },
           {
             title: '菜单可见', field: 'Visible', width: 80, formatter: function (val, rowdata, index) {
               if (val) {
                 return '<a class="grid_visible" href="javascript:void(0)" >' + val + '</a>';
               } else {
                 return '<a class="grid_unvisible" href="javascript:void(0)" >' + val + '</a>';
               }
             }
           },
           { title: 'Winform窗体类型', field: 'WinformType', width: 400 },
           { title: 'Web界面Url地址', field: 'Url', width: 200 },
           { title: 'Web界面的菜单图标', field: 'WebIcon', width: 120 },
           { title: '系统编号', field: 'SystemType_ID', width: 80 }
        ]], 

  onLoadSuccess: function () {
          $(".grid_visible").linkbutton({ text: '可见', plain: true, iconCls: 'icon-ok' });
          $(".grid_unvisible").linkbutton({ text: '不可见', plain: true, iconCls: 'icon-stop' });
        }, 

 <link href="~/Content/JQueryTools/JQueryTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
  <script src="~/Content/JQueryTools/JQueryTree/js/jquery.ztree.core-3.5.min.js" type="text/javascript"></script> 

 <script type="text/javascript">
   <!--
    var setting = {
      data: {
        simpleData: {
          enable: true
        }
      },
      callback: {
        onClick: onClick,
        onDblClick: onDblClick
      }
    }
    //重新加载树形结构（异步）
    function reloadTree() {
      $("#loading").show();
      $.getJSON("/DictType/GetTreeJson?r=" + Math.random(), function (json) {
        $.fn.zTree.init($("#treeDemo"), setting, json);
        $.fn.zTree.getZTreeObj("treeDemo").expandAll(true);
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var treeNodes = treeObj.getNodes();
        if (treeNodes != null) {
          loadTypeData(treeNodes[0].id);
        }
      });
      $("#loading").fadeOut(500);
    }
    //树单击节点操作
    function onClick(event, treeId, treeNode, clickFlag) {
      var id = treeNode.id;
      loadTypeData(id);
    }
    //树双击节点操作
    function onDblClick(event, treeId, treeNode) {
      var id = treeNode.id;
      loadTypeData(id);
      ShowDictType('edit');
    } 

  <!--主工作区-->
  <div id="mainPanle" region="center" title="" style="overflow:hidden;">
    <div id="tabs" class="easyui-tabs" fit="true" border="false" >
    </div>
  </div> 

<div class="easyui-layout" style="width:700px;height:700px;" fit="true">
    <div data-options="region:'west',split:true,title:'字典类别',iconCls:'icon-book'" style="width: 300px; padding: 1px;">
      <div style="padding: 1px; border: 1px solid #ddd;">        
        .......................</div>
      <div>
        <ul id="treeDemo" class="ztree">
        </ul>
      </div>
    </div>
    <div id="tb" data-options="region:'center',title:'字典数据',iconCls:'icon-book'" style="padding:5px;height:auto">        
      <!-------------------------------详细信息展示表格----------------------------------->
      <table id="grid" style="width: 940px" title="用户操作" iconcls="icon-view"></table>
    </div>
  </div> 

<script>
    function alert1(){
      $.messager.alert('My Title','Here is a message!');
    }
    function alert2(){
      $.messager.alert('My Title','Here is a error message!','error');
    }
    function alert3(){
      $.messager.alert('My Title','Here is a info message!','info');
    }
    function alert4(){
      $.messager.alert('My Title','Here is a question message!','question');
    }
    function alert5(){
      $.messager.alert('My Title','Here is a warning message!','warning');
    }
  </script> 

 $.messager.confirm("删除确认", "您确认删除选定的记录吗？", function (deleteAction) {
          if (deleteAction) {
            $.get("/DictData/DeletebyIds", postData, function (data) {
              if (data == "true") {
                $.messager.alert("提示", "删除选定的记录成功");
                $("#grid").datagrid("reload");
                //当删除完成之后，第二次删除的时候还记得上次的信息，这样是不可以的，所以我们需要清除第一次的信息                
                rows.length = "";//第一种方法                
                $("#grid").datagrid("clearSelections");//第二种方法
              }
              else {
                $.messager.alert("提示", data);
              }
            });
          }
        });