初次使用EasyUI框架插件遇到的問題及總結

時間  2019-11-16
標籤 初次 使用 easyui 框架 插件 遇到 問題 總結 简体版
原文   原文鏈接

因爲公司作的系統大部分是後臺系統，系統中列表居多；EasyuUI的datagrid這個插件對列表處理的仍是很好的，知足公司的大部分列表需求了。使用easyui框架也是進入如今的公司以後採用到的。css

關於EasyuUI的datagrid能夠在已有的表格元素建立數據網格（datagrid），在 html 中定義列、行及數據；也能夠經過js來動態建立數據網格。關於如何建立看EasyUI的官網就能夠了，比較簡單。html

首先是關於接受到的數據格式最好是按照官網的例子寫ajax

{"total":28,"rows":[
   {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
   {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
   {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
   {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
   {"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
   {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
   {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
   {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
   {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
   {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}複製代碼

total是總計，rows這個數組裏面是每一行數據；這樣寫的好處是若是開啓EasyuUI的datagrid的分頁功能能夠識別，要否則沒有total總的頁碼數會顯示NaN。json

        英文會是這個樣子：Displaying 1 to NaN of NaN items數組

        中文會是這個樣子：顯示1到NaN,共NaN記錄瀏覽器

        若是不分頁的話，數據格式也能夠是一個數組包含多個對象bash

[
   {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
   {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
   {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
   {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
   {"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
   {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
   {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
   {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
   {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
   {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]複製代碼

在使用datagrid時中間遇到過一次這樣的狀況，當時個人datagrid開啓了分頁，我在請求後臺的數據接口時會將當前的查詢條件當作queryParams額外參數給後臺，因爲開啓了分頁，所以每次傳給後臺的參數EasyUI會自動的在個人額外參數後面加倆個參數，一個是page：1，另外一個是rows：10，page是當前頁碼，rows是一頁展現多少條。app

當我第一次查詢時，後臺接受到的參數是正常的，page：1，頁面展現也沒有問題。只有當我將page改成非第一頁時，這是點查詢傳給後臺的參數就變成了page：當前頁碼，這樣後臺就接受了一個錯誤的參數，後臺是根據我傳的參數來識別第幾頁，展現多少條數據的；所以就出現了bug；框架

這個問題讓我找了半天，最後看官網文檔，有一個pageNumber屬性，就是告訴列表初始化的頁面，也就是傳給後臺的page。。。。。後來點查詢以後的代碼就是這個樣子了less

$('#dg').datagrid({
    url：'',                     //接口
    pageNumber:1,               //初始化頁碼
    queryParams:queryParams    //查詢條件
});複製代碼

    關於EasyUI上傳文件的

<input id="import_excel" name="import_excel" class="easyui-filebox" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" style="width:430px">複製代碼

    獲取上傳文件的值是：

$('#import_excel').filebox('getValue')複製代碼

    form表單裏面含有上傳文件提交時form表頭應該帶上

<form id="batch_form" method="post" enctype="multipart/form-data">複製代碼

表單中enctype="multipart/form-data"的意思，是設置表單的MIME編碼。默認狀況，這個編碼格式是application/x-www-form-urlencoded，不能用於文件上傳；只有使用了multipart/form-data，才能完整的傳遞文件數據，進行下面的操做。

我使用的是EasyUI的form插件來提交的 

$('#ff').form('submit', {
	url: ...,
	onSubmit: function(){},
	success: function(){}
});複製代碼

當時遇到的是在IE瀏覽器success返回的JSON對象會自動下載保存，這個問題我是讓後臺給我返回字符串，不要返回JSON對象；

關於EasyUI的日期框擴展校驗,能夠這麼寫

$.extend($.fn.validatebox.defaults.rules, {
    datecheck: {
        validator: function (value, param) {
            var end = $(param[0]).datetimebox('getValue');  //獲取開始時間
            return value > end;
        },
        message: '結束日期應大於開始日期!'           //匹配失敗消息
    }
    ,equaldDate: {
        validator: function (value, param) {
            var start = $(param[0]).datetimebox('getValue');  //獲取開始時間
            var a = new Date(start.replace(/-/g,"/")).getTime();
            var b = new Date(value.replace(/-/g,"/")).getTime();
            var c = (b-a)/ 1000 / 60 / 60 / 24;
            return c < 90;
        },
        message: '時間期間不能超過3個月!'           //匹配失敗消息
    }
    ,equaldate:{
        validator: function (value, param) {
            var start = $(param[0]).datetimebox('getValue');  //獲取開始時間
            var a = new Date(start.replace(/-/g,"/")).getTime();
            var b = new Date(value.replace(/-/g,"/")).getTime();
            var c = (b-a)/ 1000 / 60 / 60 / 24;
            return c < 7;
        },
        message: '時間期間不能超過7天!'           //匹配失敗消息
    }
});
複製代碼

我是單獨寫了一個JS文件，引入到html中的，放在easyui.js下面

    html代碼

<input id="startTime" class="easyui-datebox" style="width:100%;">
<input class="easyui-datebox"  validType="equaldate['#startTime']" style="width:100%;">複製代碼

關於EasyUI的combobox使用

/*省市區下拉聯動*/
function provinceCityCountryFun(x,y,z) {
    x.combobox({
        url:province_url,             //接口
        valueField: 'ProvinceId',     //每一個option的value值
        textField: 'ProvinceName',    //每個option展現的文字
        editable: true,               //可編
        filter: function (q, row)     //能夠模糊匹配
             var opts = $(this).combobox('options');
             return row[opts.textField].indexOf(q) >= 0;//這裏改爲>=便可在任意地方匹配
        },
        onSelect: function(rec) {     //當選擇某一項時，讓城市從新加載符合的數據，區縣清空
            y.combobox('clear').combobox('reload',city_url + "?ProvinceId=" + rec.ProvinceId);
            z.combobox('clear').combobox('loadData',{});

        },
        onLoadSuccess: function(data) {}
    });
    y.combobox({
        valueField: 'CityId',
        textField: 'CityName',
        editable: false,
        onSelect: function(rec) {
            z.combobox('clear').combobox('reload',country_url + "?CityId=" + rec.CityId);
        },
        onLoadSuccess: function(data) {}
    });
    z.combobox({
        valueField: 'CountyId',
        textField: 'CountyName',
        editable: false,
        onSelect: function(rec) {},
        onLoadSuccess: function(data) {}
    });

}複製代碼

關於EasyUI的正在處理彈窗；就是當請求ajax時，給用戶提示一個正在處理的信息

function ajaxLoading(){
    $("<div class=\"datagrid-mask\"></div>").css({display:"block",zIndex:9019,width:"100%",height:$(window).height()}).appendTo("body");
    $("<div class=\"datagrid-mask-msg\"></div>").html("正在處理，請稍候。。。").appendTo("body").css({display:"block",zIndex:9020,left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});
}
function ajaxLoadEnd(){
    $(".datagrid-mask").remove();
    $(".datagrid-mask-msg").remove();
}複製代碼
$('#batch_form').form('submit', {
    url: '',
    onSubmit: function(param){
        ajaxLoading();           
    },
    success: function(res){
        ajaxLoadEnd(); 
    }
});複製代碼

關於EasyUI的data-option屬性

data-option屬性能夠將EasyUI插件的屬性寫在html代碼中來對組件實例化

使用data-option

<table id="dg" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
      data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json',method:'get'">
</table>複製代碼

不使用data-option將是下面這個樣子，在js中來寫組件屬性使組件實例化

$('#dg').datagrid({
    url:'',
    method: 'post',
    pagination:true,
    pageSize: 20,
    pageList: [20,50, 100, 200],
    fitColumns:true,
    fit:true,
    nowrap:false,
    singleSelect: false,
    toolbar: '#tb'
})複製代碼

以上就是小白我目前使用EasyUI遇到的問題以及一些總結。。。。。。若有不對請各位指出，謝謝了；

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程