编程 Javascript

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

Posted in Javascript onDecember 16, 2015

在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔，本篇继续介绍其中界面部分的一些使用知识，包括控件的赋值、取值、清空，以及相关的使用。

我们知道，一般Web界面包括的界面控件有：单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息、列表控件等，这些界面控件的操作都有哪些不同，下面我们来逐一进行介绍。

1、单行文本框

使用easyui的控件，单行文本可以使用easyui-validatebox样式即可，类型为text的控件。

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

界面代码如下所示：

<input class="easyui-validatebox" type="text" id="Name" name="Name" />

或者

<input type="text" ID="txtLoginName" name="txtLoginName" style="width:100px"  />

赋值给界面控件代码如下：

$("#Name").val(info.Name);

获取界面控件的值代码如下：

var name = $("#Name").val();

如果是标签Lable控件，这需要把val 使用text替代即可，如下代码所示：

$("#Name").text(info.Name);

对于easyui-validatebox样式的控件，一般来说，有几个常见属性可以设置他们的。

//必输项：
 <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]'">

2、多行文本框

easyui的界面样式，可以使用easyui-validatebox，或者默认的textarea即可。

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

界面代码如下所示：

<textarea id="type_Remark" class="easyui-validatebox" required="true" style="height:100px;"></textarea>

或者

<textarea style="height:60px;width:200px" id="type_Remark" name="Remark"></textarea>

赋值给界面控件代码如下：

$("#type_Remark").val(json.Remark);

获取界面控件的值代码如下：

var text = $("#type_Remark").val();

3、密码文本框

密码文本框和常规的文本框一样，只是输入字符的时候，系统做了屏蔽显示而已，把它作为一个来独立说明，也是因为它也是常见输入的一种。

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

界面代码如下所示：

 <input type="password" name="password" style="width:260px;"></input>

赋值给界面控件代码如下：

var password = '123';

$("#Password").val(password)

获取界面控件的值代码如下：

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

4、下拉列表Combobox

常见的EasyUI的ComboBox是可以输入，也可以从列表选择的内容的输入控件。

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

界面代码如下所示：

<input class="easyui-combobox" type="text" id="type_PID1" name="PID" />

绑定下拉列表的数据源代码如下：

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

设置控件的选择的内容代码如下：

$("#type_PID1").combobox('setValue', json.PID);

获取界面控件的值代码如下：

var systemType=  $("#txtSystemType_ID").combobox('getValue');

而利用标准的Select控件虽然可以实现从列表选择，不过不够ComboBox控件那么灵活方便，Select控件的界面代码如下：

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

<select id="txtPID" style="width: 100%" > </select>

5、日期输入控件

easyui使用class=‘easyui-datebox'来标识日期控件，从弹出的层中选择正确的日期，是一种非常常见的界面输入控件，可以替代My97DatePicker日期输入控件。

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

弹出窗体界面效果如下。

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

它的界面代码如下所示：

<input class="easyui-datebox" type="text" ID="txtLastUpdated" name="txtLastUpdated" style="width:100px"  />

赋值给界面控件代码如下：

$("#LastUpdated").datebox('setValue', info.LastUpdated);

获取界面控件的值代码如下：

var lastupate = $("#txtLastUpdated").datebox('getValue');

6、数值输入控件

easyui使用样式easyui-numberbox标识为数值类型，其表现为文本框，但只能输入数值。

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

界面代码如下所示：

<input class="easyui-numberbox" data-options="min:10,max:90,precision:2,required:true">

或者使用‘easyui-numberspinner'样式来标识，可以上下调节数值。

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

<input class="easyui-numberspinner" data-options="min:10,max:100,required:true" style="width:80px;"></input>

赋值给界面控件代码如下：

$('#nn').numberbox('setValue', 206.12);

或者

$('#ss').numberspinner('setValue', 8234725);

获取界面控件的值代码如下：

var v = $('#nn').numberbox('getValue');

或者

var v = $('#ss').numberspinner('getValue');

7、单项选择Radio控件

单项选择Radio控件，是在多项内容里面选择一个选项进行保存或者显示。

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

界面代码如下所示：

<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>

赋值给界面控件代码如下：

$('input:radio[name="SplitType"][value="Split"]').prop('checked', true);

获取界面控件的值代码如下：

$("input[name='SplitType']:checked").val()

或者使用Comobo控件作为单项选择的控件也是可以的，界面效果如下所示。

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

其界面代码如下所示：

<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>

8、复选框

复选框是在一项或多项内容中，选择零项或者多项的一个输入界面控件。

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

<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>

界面代码如下所示：

<input id="chkIsExpire" type="checkbox" >帐号过期

由于复选框的一些特殊性质，在表单提交的时候，如果没有勾选的选型，使用serializeArray()方法构造的数据，复选框的值则不会被提交。

基于这个原因，我们可以使用Select控件进行替代，实现复选项的功能，而不影响

var postData = $("#ffEdit").serializeArray();

以上代码的使用。

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

使用Select控件的代码如下所示。

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

赋值给界面控件代码如下：

$("#Visible1").prop('checked', info.Visible);

获取界面控件的值代码如下：

var visible = $("#txtVisible").val();

9、表格控件DataGrid

easyui的列表控件，可以通过指定table的class属性为easyui-datagrid即可实现表格的定义，界面代码如下所示：

<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>

不过为了避免使用脚本定义datagrid导致多次初始化的问题，我们一般只需要指定一个table代码即可，界面如下所示

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

而表格控件的数据加载，我们使用javascript进行初始化，初始化后的表格界面显示效果如下所示。

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

Javascript代码如下所示，其中的width: function () { return document.body.clientWidth * 0.9 }是用来实现宽度自适应的一个操作。

//实现对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();
        }
      })
    };

对于查询按钮触发的数据后台查询及数据绑定操作，javascript代码如下所示：

//绑定查询按钮的的点击事件
    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;
      });
    }

通过构造一些查询参数并传递相应的值，后台根据这些参数，从对应控制器的分页方法 FindWithPager 获取相应的分页数据，并绑定到grid控件中。

另外，如果需要在grid里面增加一些图片或者链接什么的，应该如何操作呢？

如下界面所示的效果：

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

首先需要在初始化代码里面增加列的formatter回调函数，如下所示。

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 }
        ]],

在formatter回调函数里面添加逻辑代码，判断是否可见，其实就是增加两个图片按钮，但是图片按钮的样式设置，必须在加载数据完毕后才能操作，因此需要在函数里面处理。

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

如果显示的图片不完整，设置行的自动调整高度属性为true即可。

autoRowHeight: true

10、树形控件

虽然easyui也有Tree控件，不过我较喜欢使用zTree这个树形控件，这个是一个免费的Jquery树控件。

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

引用代码如下所示：

<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>

初始化在Tree树控件的界面代码如下所示：

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

11、布局控件

EasyUI通过DIV层来控制布局的显示，DIV里面增加一个Region的属性用来区分属于哪个区域，如下图是我Web开发框架的界面布局效果图。

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

界面代码如下所示：

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

我们详细查看主工作区的代码，如下所示。

<!--主工作区-->
  <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>

12、弹出式对话框

EasyUI弹出式对话框用的很多，对话框的界面代码放在DIV层里面，一般在界面整个界面加载后中已经初始化了，只是我们根据条件相似适当的层即可，这样就形成了弹出式对话框，弹出式对话框有一个遮罩的效果。

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

界面代码如下所示：

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

13、提示信息

在常规的Web界面提示里面，我们一般用纯粹的javascript的alert函数来进行信息的提示，如果在基于EasyUI的界面布局和演示里面，使用这个提示显然会和界面演示不够匹配，因此我们使用messager类来进行相应的提示信息处理，简单的脚本提示代码如下。

$.messager.alert("提示", "修改成功");

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

提示信息也可以更加丰富，添加图标等信息，界面代码如下所示。

<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类也进行了封装处理，效果也不错。

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

界面代码如下所示。

$.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);
              }
            });
          }
        });

以上就是我Web开发框架里面常用到的一些界面控件展示以及相关的代码介绍，有一些不太常用的控件可能还没有在本文中介绍，欢迎大家进行补充和讨论，以后有时间继续完善这个文章，作为基于MVC+EasyUI的框架界面的一个很好的参考。希望大家喜欢，多多提意见。

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

- Author -

伍华聪

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Json对象替换字符串占位符实现代码

Nov 17 Javascript

jquery使用jquery.zclip插件复制对象的实例教程

Dec 04 Javascript

Javascript基础知识（三）BOM，DOM总结

Sep 29 Javascript

jQuery获取radio选中项的值实例

Jun 18 Javascript

Node.js中使用jQuery的做法

Aug 17 Javascript

谈谈target=_new和_blank的不同之处

Oct 25 Javascript

百度地图JavascriptApi Marker平滑移动及车头指向行径方向

Mar 13 Javascript

JavaScript 日期时间选择器一些小结

Apr 02 Javascript

angular6.x中ngTemplateOutlet指令的使用示例

Aug 09 Javascript

公众号SVG动画交互实战代码

May 31 Javascript

vue实现给div绑定keyup的enter事件

Jul 31 Javascript

JavaScript中的LHS和RHS分析详情

Apr 06 Javascript

基于JavaScript获取鼠标位置的各种方法

Dec 16 #Javascript

javascript基于prototype实现类似OOP继承的方法

Dec 16 #Javascript

javascript数组克隆简单实现方法

Dec 16 #Javascript

Perl Substr()函数及函数的应用

Dec 16 #Javascript

javascript针对不确定函数的执行方法

Dec 16 #Javascript

深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性

Dec 16 #Javascript

js如何判断输入字符串长度

Dec 16 #Javascript