当前位置： 首页 > news >正文

初次使用EasyUI框架插件遇到的问题及总结

news 来源：原创 2024/5/20 19:33:17

由于公司做的系统大部分是后台系统，系统中列表居多；EasyuUI的datagrid这个插件对列表处理的还是很好的，满足公司的大部分列表需求了。使用easyui框架也是进入现在的公司之后采用到的。

关于EasyuUI的datagrid可以在已有的表格元素创建数据网格（datagrid），在 html 中定义列、行及数据；也可以通过js来动态创建数据网格。关于如何创建看EasyUI的官网就可以了，比较简单。

首先是关于接受到的数据格式最好是按照官网的例子写

{"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。

        英文会是这个样子：Displaying 1 to NaN of NaN items

        中文会是这个样子：显示1到NaN,共NaN记录

        如果不分页的话，数据格式也可以是一个数组包含多个对象

[
   {"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是一页展示多少条。

当我第一次查询时，后台接受到的参数是正常的，page：1，页面展示也没有问题。只有当我将page改为非第一页时，这是点查询传给后台的参数就变成了page：当前页码，这样后台就接受了一个错误的参数，后台是根据我传的参数来识别第几页，展示多少条数据的；因此就出现了bug；

这个问题让我找了半天，最后看官网文档，有一个pageNumber属性，就是告诉列表初始化的页面，也就是传给后台的page。。。。。后来点查询之后的代码就是这个样子了

$('#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遇到的问题以及一些总结。。。。。。如有不对请各位指出，谢谢了；


相关文章：

  • linux命令入门
  • Tomcat/Memcached实现会话保持(SessionServer)
  • CloudStack 4.4+KVM之通过ISO文件创建CentOS虚拟机
  • MS Project学习笔记一：安装
  • php变量处理函数总结
  • centos6安装django-1.8.11
  • 【iOS-Cocos2d游戏开发之七】添加/删除系统组件，并解决View设置透明会影响View中的其他组件的问题！...
  • 多使用调用堆栈调试VC++代码
  • Hyper-V 2016 系列教程53 What's new in Hyper-V on Windows Server 2016
  • 一个不错的linux学习资料下载的网址
  • Delphi使用资源文件全攻略
  • 检查邮件服务器的postfix-pop3-mysql服务状态的脚本
  • 华为交换机忘记console的密码,怎么恢复出厂设置
  • 1星《微信软文营销实战技巧》：标题党，作者没有实战经验
  • Windows 2008 R2 Sp1平台整合部署Ex2010与Lync Server 2010参考(三)v1.0
  • [译] React v16.8： 含有Hooks的版本
  • ES6语法详解(一)
  • input的行数自动增减
  • JS实现简单的MVC模式开发小游戏
  • Mac转Windows的拯救指南
  • Mocha测试初探
  • MYSQL 的 IF 函数
  • NLPIR语义挖掘平台推动行业大数据应用服务
  • orm2 中文文档 3.1 模型属性
  • vue从入门到进阶：计算属性computed与侦听器watch（三）
  • 给自己的博客网站加上酷炫的初音未来音乐游戏？
  • 聚簇索引和非聚簇索引
  • 来，膜拜下android roadmap，强大的执行力
  • 浅谈JavaScript的面向对象和它的封装、继承、多态
  • 如何利用MongoDB打造TOP榜小程序
  • 提醒我喝水chrome插件开发指南
  • 线性表及其算法（java实现）
  • d²y/dx²； 偏导数问题 请问f1 f2是什么意思
  • CMake 入门1/5：基于阿里云 ECS搭建体验环境
  • k8s使用glusterfs实现动态持久化存储
  • #我与Java虚拟机的故事#连载17：我的Java技术水平有了一个本质的提升
  • (07)Hive——窗口函数详解
  • （11）MSP430F5529 定时器B
  • (2/2) 为了理解 UWP 的启动流程，我从零开始创建了一个 UWP 程序
  • （7）STL算法之交换赋值
  • （9）目标检测_SSD的原理
  • （LeetCode C++）盛最多水的容器
  • (LNMP) How To Install Linux, nginx, MySQL, PHP
  • （Redis使用系列） Springboot 使用Redis+Session实现Session共享 ，简单的单点登录 五
  • （WSI分类）WSI分类文献小综述 2024
  • （待修改）PyG安装步骤
  • （二）基于wpr_simulation 的Ros机器人运动控制，gazebo仿真
  • （翻译）Quartz官方教程——第一课：Quartz入门
  • （三） diretfbrc详解
  • （原）Matlab的svmtrain和svmclassify
  • (原創) 如何動態建立二維陣列(多維陣列)? (.NET) (C#)
  • （转）eclipse内存溢出设置 -Xms212m -Xmx804m -XX:PermSize=250M -XX:MaxPermSize=356m
  • (转)菜鸟学数据库（三）——存储过程
  • (转)清华学霸演讲稿：永远不要说你已经尽力了
  • ***php进行支付宝开发中return_url和notify_url的区别分析