欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于MVC4+EasyUI的Web開(kāi)發(fā)框架形成之旅之界面控件的使用

 更新時(shí)間:2015年12月16日 14:31:25   作者:伍華聰  
一般Web界面包括的界面控件有:?jiǎn)涡形谋究?、多行文本框、密碼文本框、下拉列表Combobox、日期輸入控件、數(shù)值輸入控件、單項(xiàng)選擇、復(fù)選框、表格控件DataGrid、樹(shù)形控件、布局控件、彈出式對(duì)話框、提示信息、列表控件等,這些界面控件的操作都有哪些不同,下面逐一介紹

在前面介紹了兩篇關(guān)于我的基于MVC4+EasyUI技術(shù)的Web開(kāi)發(fā)框架的隨筆,本篇繼續(xù)介紹其中界面部分的一些使用知識(shí),包括控件的賦值、取值、清空,以及相關(guān)的使用。

我們知道,一般Web界面包括的界面控件有:?jiǎn)涡形谋究?、多行文本框、密碼文本框、下拉列表Combobox、日期輸入控件、數(shù)值輸入控件、單項(xiàng)選擇、復(fù)選框、表格控件DataGrid、樹(shù)形控件、布局控件、彈出式對(duì)話框、提示信息、列表控件等,這些界面控件的操作都有哪些不同,下面我們來(lái)逐一進(jìn)行介紹。

 

1、單行文本框

使用easyui的控件,單行文本可以使用easyui-validatebox樣式即可,類型為text的控件。

界面代碼如下所示:

復(fù)制代碼 代碼如下:

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

或者

復(fù)制代碼 代碼如下:

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

賦值給界面控件代碼如下:

復(fù)制代碼 代碼如下:

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

獲取界面控件的值代碼如下:

復(fù)制代碼 代碼如下:

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

如果是標(biāo)簽Lable控件,這需要把val 使用text替代即可,如下代碼所示:

復(fù)制代碼 代碼如下:

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

 對(duì)于easyui-validatebox樣式的控件,一般來(lái)說(shuō),有幾個(gè)常見(jiàn)屬性可以設(shè)置他們的。

//必輸項(xiàng):
 <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input>
//格式的驗(yàn)證:
 <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>
//長(zhǎng)度范圍的驗(yàn)證:
 <input class="easyui-validatebox" data-options="validType:'length[1,3]'"> 

2、多行文本框

easyui的界面樣式,可以使用easyui-validatebox,或者默認(rèn)的textarea即可。

界面代碼如下所示:

復(fù)制代碼 代碼如下:

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

或者

復(fù)制代碼 代碼如下:

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

賦值給界面控件代碼如下:

復(fù)制代碼 代碼如下:

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

獲取界面控件的值代碼如下:

復(fù)制代碼 代碼如下:

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

3、密碼文本框

密碼文本框和常規(guī)的文本框一樣,只是輸入字符的時(shí)候,系統(tǒng)做了屏蔽顯示而已,把它作為一個(gè)來(lái)獨(dú)立說(shuō)明,也是因?yàn)樗彩浅R?jiàn)輸入的一種。

界面代碼如下所示:

復(fù)制代碼 代碼如下:

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

賦值給界面控件代碼如下:

復(fù)制代碼 代碼如下:

var password = '123';
$("#Password").val(password)

獲取界面控件的值代碼如下:

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

4、下拉列表Combobox

常見(jiàn)的EasyUI的ComboBox是可以輸入,也可以從列表選擇的內(nèi)容的輸入控件。

 

界面代碼如下所示:

復(fù)制代碼 代碼如下:

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

綁定下拉列表的數(shù)據(jù)源代碼如下:

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

設(shè)置控件的選擇的內(nèi)容代碼如下:

復(fù)制代碼 代碼如下:

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

獲取界面控件的值代碼如下:

復(fù)制代碼 代碼如下:

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

 而利用標(biāo)準(zhǔn)的Select控件雖然可以實(shí)現(xiàn)從列表選擇,不過(guò)不夠ComboBox控件那么靈活方便,Select控件的界面代碼如下:

復(fù)制代碼 代碼如下:

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

5、日期輸入控件

easyui使用class=‘easyui-datebox'來(lái)標(biāo)識(shí)日期控件,從彈出的層中選擇正確的日期,是一種非常常見(jiàn)的界面輸入控件,可以替代My97DatePicker日期輸入控件。

 

彈出窗體界面效果如下。

 

它的界面代碼如下所示:

復(fù)制代碼 代碼如下:

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

賦值給界面控件代碼如下:

復(fù)制代碼 代碼如下:

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

獲取界面控件的值代碼如下:

復(fù)制代碼 代碼如下:

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

6、數(shù)值輸入控件

easyui使用樣式easyui-numberbox標(biāo)識(shí)為數(shù)值類型,其表現(xiàn)為文本框,但只能輸入數(shù)值。

 


界面代碼如下所示:

復(fù)制代碼 代碼如下:

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

或者使用‘easyui-numberspinner'樣式來(lái)標(biāo)識(shí),可以上下調(diào)節(jié)數(shù)值。

復(fù)制代碼 代碼如下:

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

賦值給界面控件代碼如下:

復(fù)制代碼 代碼如下:

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

或者

復(fù)制代碼 代碼如下:

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

獲取界面控件的值代碼如下:

復(fù)制代碼 代碼如下:

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

或者

復(fù)制代碼 代碼如下:

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

7、單項(xiàng)選擇Radio控件

單項(xiàng)選擇Radio控件,是在多項(xiàng)內(nèi)容里面選擇一個(gè)選項(xiàng)進(jìn)行保存或者顯示。

界面代碼如下所示:                 

 <tr>
            <th>
              <label>數(shù)據(jù)分開(kāi)方式:</label>
            </th>
            <td>
              <input name="SplitType" type="radio" class="easyui-validatebox" checked="checked" required="true" value="Split">分隔符方式,多個(gè)數(shù)據(jù)中英文逗號(hào),分號(hào),斜杠或頓號(hào)[, , ; ; / 、]分開(kāi),或一行一個(gè) 
              <br />
              <input name="SplitType" type="radio" class="easyui-validatebox" required="true" value="Line">一行一個(gè)記錄模式,忽略所有分隔符號(hào)
            </td>
          </tr> 

賦值給界面控件代碼如下:

復(fù)制代碼 代碼如下:

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

獲取界面控件的值代碼如下:

復(fù)制代碼 代碼如下:

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

或者使用Comobo控件作為單項(xiàng)選擇的控件也是可以的,界面效果如下所示。

 

其界面代碼如下所示:

 <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、復(fù)選框

復(fù)選框是在一項(xiàng)或多項(xiàng)內(nèi)容中,選擇零項(xiàng)或者多項(xiàng)的一個(gè)輸入界面控件。

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

界面代碼如下所示:

復(fù)制代碼 代碼如下:

<input id="chkIsExpire" type="checkbox" >帳號(hào)過(guò)期

由于復(fù)選框的一些特殊性質(zhì),在表單提交的時(shí)候,如果沒(méi)有勾選的選型,使用serializeArray()方法構(gòu)造的數(shù)據(jù),復(fù)選框的值則不會(huì)被提交。

基于這個(gè)原因,我們可以使用Select控件進(jìn)行替代,實(shí)現(xiàn)復(fù)選項(xiàng)的功能,而不影響

復(fù)制代碼 代碼如下:

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

以上代碼的使用。

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

<select id="Visible1" name="Visible">
     <option value="true" selected>正常</option>
     <option value="false">不可見(jiàn)</option>
 </select> 

賦值給界面控件代碼如下:

復(fù)制代碼 代碼如下:

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

獲取界面控件的值代碼如下:

復(fù)制代碼 代碼如下:

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

9、表格控件DataGrid

easyui的列表控件,可以通過(guò)指定table的class屬性為easyui-datagrid即可實(shí)現(xiàn)表格的定義,界面代碼如下所示:

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

不過(guò)為了避免使用腳本定義datagrid導(dǎo)致多次初始化的問(wèn)題,我們一般只需要指定一個(gè)table代碼即可,界面如下所示   

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

而表格控件的數(shù)據(jù)加載,我們使用javascript進(jìn)行初始化,初始化后的表格界面顯示效果如下所示。

Javascript代碼如下所示,其中的width: function () { return document.body.clientWidth * 0.9 }是用來(lái)實(shí)現(xiàn)寬度自適應(yīng)的一個(gè)操作。

 //實(shí)現(xiàn)對(duì)DataGird控件的綁定操作
    function InitGrid(queryData) {
      $('#grid').datagrid({  //定位到Table標(biāo)簽,Table標(biāo)簽的ID是grid
        url: '/Menu/FindWithPager',  //指向后臺(tái)的Action來(lái)獲取當(dāng)前菜單的信息的Json格式的數(shù)據(jù)
        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',  //根據(jù)某個(gè)字段給easyUI排序
        sortOrder: 'asc',
        remoteSort: false,
        idField: 'ID',
        queryParams: queryData, //異步查詢的參數(shù)
        columns: [[
          { field: 'ck', checkbox: true },  //選擇
           { title: '顯示名稱', field: 'Name', width: 200},
           { title: '圖標(biāo)', field: 'Icon', width: 150 },
           { title: '排序', field: 'Seq', width: 80 },
           { title: '功能ID', field: 'FunctionId', width: 80 },
           { title: '菜單可見(jiàn)', field: 'Visible', width: 80 },
           { title: 'Winform窗體類型', field: 'WinformType', width: 400 },
           { title: 'Web界面Url地址', field: 'Url', width: 200 },
           { title: 'Web界面的菜單圖標(biāo)', field: 'WebIcon', width: 120 },
           { title: '系統(tǒng)編號(hào)', field: 'SystemType_ID', width: 80 }
        ]],
        toolbar: [{
          id: 'btnAdd',
          text: '添加',
          iconCls: 'icon-add',
          handler: function () {
            ShowAddDialog();//實(shí)現(xiàn)添加記錄的頁(yè)面
          }
        }, '-', {
          id: 'btnEdit',
          text: '修改',
          iconCls: 'icon-edit',
          handler: function () {
            ShowEditOrViewDialog();//實(shí)現(xiàn)修改記錄的方法
          }
        }, '-', {
          id: 'btnDelete',
          text: '刪除',
          iconCls: 'icon-remove',
          handler: function () {
            Delete();//實(shí)現(xiàn)直接刪除數(shù)據(jù)的方法
          }
        }, '-', {
          id: 'btnView',
          text: '查看',
          iconCls: 'icon-table',
          handler: function () {
            ShowEditOrViewDialog("view");//實(shí)現(xiàn)查看記錄詳細(xì)信息的方法
          }
        }, '-', {
          id: 'btnReload',
          text: '刷新',
          iconCls: 'icon-reload',
          handler: function () {
            //實(shí)現(xiàn)刷新欄目中的數(shù)據(jù)
            $("#grid").datagrid("reload");
          }
        }],
        onDblClickRow: function (rowIndex, rowData) {
          $('#grid').datagrid('uncheckAll');
          $('#grid').datagrid('checkRow', rowIndex);
          ShowEditOrViewDialog();
        }
      })
    }; 

對(duì)于查詢按鈕觸發(fā)的數(shù)據(jù)后臺(tái)查詢及數(shù)據(jù)綁定操作,javascript代碼如下所示:

  //綁定查詢按鈕的的點(diǎn)擊事件
    function BindSearchEvent() {
      //按條件進(jìn)行查詢數(shù)據(jù),首先我們得到數(shù)據(jù)的值
      $("#btnSearch").click(function () {
        //得到用戶輸入的參數(shù),取值有幾種方式:$("#id").combobox('getValue'), $("#id").datebox('getValue'), $("#id").val()
        //字段增加WHC_前綴字符,避免傳遞如URL這樣的Request關(guān)鍵字沖突
        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;
      });
    } 

通過(guò)構(gòu)造一些查詢參數(shù)并傳遞相應(yīng)的值,后臺(tái)根據(jù)這些參數(shù),從對(duì)應(yīng)控制器的分頁(yè)方法 FindWithPager 獲取相應(yīng)的分頁(yè)數(shù)據(jù),并綁定到grid控件中。

另外,如果需要在grid里面增加一些圖片或者鏈接什么的,應(yīng)該如何操作呢?

如下界面所示的效果:

首先需要在初始化代碼里面增加列的formatter回調(diào)函數(shù),如下所示。           

  columns: [[
          { field: 'ck', checkbox: true },  //選擇
           { title: '顯示名稱', field: 'Name', width: 200},
           { title: '圖標(biāo)', field: 'Icon', width: 150 },
           { title: '排序', field: 'Seq', width: 80 },
           { title: '功能ID', field: 'FunctionId', width: 80 },
           {
             title: '菜單可見(jiàn)', 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界面的菜單圖標(biāo)', field: 'WebIcon', width: 120 },
           { title: '系統(tǒng)編號(hào)', field: 'SystemType_ID', width: 80 }
        ]], 

在formatter回調(diào)函數(shù)里面添加邏輯代碼,判斷是否可見(jiàn),其實(shí)就是增加兩個(gè)圖片按鈕,但是圖片按鈕的樣式設(shè)置,必須在加載數(shù)據(jù)完畢后才能操作,因此需要在函數(shù)里面處理。          

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

如果顯示的圖片不完整,設(shè)置行的自動(dòng)調(diào)整高度屬性為true即可。

autoRowHeight: true

10、樹(shù)形控件

雖然easyui也有Tree控件,不過(guò)我較喜歡使用zTree這個(gè)樹(shù)形控件,這個(gè)是一個(gè)免費(fèi)的Jquery樹(shù)控件。

引用代碼如下所示:

 <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樹(shù)控件的界面代碼如下所示:

 <script type="text/javascript">
   <!--
    var setting = {
      data: {
        simpleData: {
          enable: true
        }
      },
      callback: {
        onClick: onClick,
        onDblClick: onDblClick
      }
    }
    //重新加載樹(shù)形結(jié)構(gòu)(異步)
    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);
    }
    //樹(shù)單擊節(jié)點(diǎn)操作
    function onClick(event, treeId, treeNode, clickFlag) {
      var id = treeNode.id;
      loadTypeData(id);
    }
    //樹(shù)雙擊節(jié)點(diǎn)操作
    function onDblClick(event, treeId, treeNode) {
      var id = treeNode.id;
      loadTypeData(id);
      ShowDictType('edit');
    } 

11、布局控件

EasyUI通過(guò)DIV層來(lái)控制布局的顯示,DIV里面增加一個(gè)Region的屬性用來(lái)區(qū)分屬于哪個(gè)區(qū)域,如下圖是我Web開(kāi)發(fā)框架的界面布局效果圖。

 

界面代碼如下所示:

我們?cè)敿?xì)查看主工作區(qū)的代碼,如下所示。

  <!--主工作區(qū)-->
  <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:'字典數(shù)據(jù)',iconCls:'icon-book'" style="padding:5px;height:auto">        
      <!-------------------------------詳細(xì)信息展示表格----------------------------------->
      <table id="grid" style="width: 940px" title="用戶操作" iconcls="icon-view"></table>
    </div>
  </div> 

12、彈出式對(duì)話框

EasyUI彈出式對(duì)話框用的很多,對(duì)話框的界面代碼放在DIV層里面,一般在界面整個(gè)界面加載后中已經(jīng)初始化了,只是我們根據(jù)條件相似適當(dāng)?shù)膶蛹纯桑@樣就形成了彈出式對(duì)話框,彈出式對(duì)話框有一個(gè)遮罩的效果。

界面代碼如下所示:

13、提示信息

在常規(guī)的Web界面提示里面,我們一般用純粹的javascript的alert函數(shù)來(lái)進(jìn)行信息的提示,如果在基于EasyUI的界面布局和演示里面,使用這個(gè)提示顯然會(huì)和界面演示不夠匹配,因此我們使用messager類來(lái)進(jìn)行相應(yīng)的提示信息處理,簡(jiǎn)單的腳本提示代碼如下。

復(fù)制代碼 代碼如下:

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

 

提示信息也可以更加豐富,添加圖標(biāo)等信息,界面代碼如下所示。

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

對(duì)于一般的刪除操作,一般有一個(gè)提示確認(rèn)的消息框,這個(gè)messager類也進(jìn)行了封裝處理,效果也不錯(cuò)。

界面代碼如下所示。             

 $.messager.confirm("刪除確認(rèn)", "您確認(rèn)刪除選定的記錄嗎?", function (deleteAction) {
          if (deleteAction) {
            $.get("/DictData/DeletebyIds", postData, function (data) {
              if (data == "true") {
                $.messager.alert("提示", "刪除選定的記錄成功");
                $("#grid").datagrid("reload");
                //當(dāng)刪除完成之后,第二次刪除的時(shí)候還記得上次的信息,這樣是不可以的,所以我們需要清除第一次的信息                
                rows.length = "";//第一種方法                
                $("#grid").datagrid("clearSelections");//第二種方法
              }
              else {
                $.messager.alert("提示", data);
              }
            });
          }
        }); 

以上就是我Web開(kāi)發(fā)框架里面常用到的一些界面控件展示以及相關(guān)的代碼介紹,有一些不太常用的控件可能還沒(méi)有在本文中介紹,歡迎大家進(jìn)行補(bǔ)充和討論,以后有時(shí)間繼續(xù)完善這個(gè)文章,作為基于MVC+EasyUI的框架界面的一個(gè)很好的參考。希望大家喜歡,多多提意見(jiàn)。

相關(guān)文章

最新評(píng)論