摘要:什么是是一种基于和的用户界面插件集合。为创建现代化,互动,应用程序,提供必要的功能。是个完美支持网页的完整框架。很简单但功能强大的。返回则取消该动作。该函数有下列参数要传递到远程服务器的参数对象。当检索数据成功时调用的回调函数。
什么是easyUI
easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。
使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
由于项目需要,主要利用easyUI的数据表格datagrid做后台系统前端部分
使用EasyUI for JQuery
$("#dg").datagrid({ url:"datagrid_data.json", columns:[[ {field:"code",title:"Code",width:100}, {field:"name",title:"Name",width:100}, {field:"price",title:"Price",width:100,align:"right"} ]] });
通过一些参数查询数据
$("#dg").datagrid("load", { name: "easyui", address: "ho" });
在向服务器改变数据后,更新前台数据
$("#dg").datagrid("reload");官方文档路径
官方网址:http://www.jeasyui.net/
下载路径:http://www.jeasyui.net/download
官方中文文档:http://www.jeasyui.net/plugins
datagrid数据网格详细介绍:http://www.jeasyui.net/plugin...
需求:页面首次加载,datagrid不加载页面数据,点击查询按钮再进行数据渲染
//onBeforeLoad发送加载数据的请求前触发,如果返回 false 加载动作就会取消。 //首次不加载页面数据 onBeforeLoad: function (param) { var firstLoad = $(this).attr("firstLoad"); if (firstLoad == "false" || typeof (firstLoad) == "undefined") { $(this).attr("firstLoad","true"); return false; } return true; }2.请求参数,服务器响应415
无法修改content-Type
可以改用loader自定义获取数据
loader:定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数:
param:要传递到远程服务器的参数对象。
success(data):当检索数据成功时调用的回调函数。
error():当检索数据失败时调用的回调函数。
loader: function (param, success, error) { //console.log(param, success, error); $.ajax({ type: "POST", url : "请求接口", contentType: "application/json", dataType: "json", data: JSON.stringify(param)//数据转换成JSON格式 }).done(function (data) { if (data.total!=0) { success(data); } else { $.messager.alert(""); error(); } }).fail(function () { }); },3.分页总页数,总条数设置问题
后台返回json数据格式
{ total:总共有多少条数据, rows:[{,},{,}]//请求页数的结果数据 }4.修改datagrid默认请求参数名称
//重新制定请求参数名称 onBeforeLoad : function(param){ var page = param.page; //保存下默认请求参数page值 delete param.page; //删掉默认请求参数page param.PageIndex = page; //将默认请求参数名称page换为PageIndex }5.设置提示信息居于页面中心
$.messager.show({}) 默认宽250 高100
利用style属性,从新定位消息框位置
style:{ left:document.body.clientWidth/2-125, // 与左边界的距离 top:document.body.clientHeight/2-50 // 与顶部的距离 }清空表格数据
$("#tableData).datagrid("loadData", { total: 0, rows: [] });//清空表格数据
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/103000.html
摘要:什么是是一种基于和的用户界面插件集合。为创建现代化,互动,应用程序,提供必要的功能。是个完美支持网页的完整框架。很简单但功能强大的。返回则取消该动作。该函数有下列参数要传递到远程服务器的参数对象。当检索数据成功时调用的回调函数。 什么是easyUI easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代化,互动,JavaScr...
摘要:什么是是一种基于和的用户界面插件集合。为创建现代化,互动,应用程序,提供必要的功能。是个完美支持网页的完整框架。很简单但功能强大的。返回则取消该动作。该函数有下列参数要传递到远程服务器的参数对象。当检索数据成功时调用的回调函数。 什么是easyUI easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代化,互动,JavaScr...
摘要:官方的数据表格属性中提供了属性其作用是设置为,则把数据显示在一行里。设置为可提高加载性能。 官方的数据表格属性中提供了nowrap属性其作用是:设置为 true,则把数据显示在一行里。设置为 true 可提高加载性能。 默认为true在设置数据表格属性时将nowrap属性设置为false时,并且设置表格的宽度,当单元格内数据内容超过宽度时就会自动换行 { field : khm...
摘要:项目初期在加载数据表格的时候为了提高表格数据渲染速度,设置了默认宽度。现需求需要加一个表格自适应的功能,触发改功能,改变列宽度,但是不重新渲染表格,不发生数据请求。设计思路,遍历每项的所有数据,比较字节符串长度,取最大长度。 项目初期在加载数据表格的时候为了提高表格数据渲染速度,设置了默认宽度。现需求需要加一个表格自适应的功能,触发改功能,改变列宽度,但是不重新渲染表格,不发生数据请求...
摘要:在的表头列特别多的情况下,不可能一个个的手写,这时就需要使用动态创建的方式,把表头列创建出来。正在加载,请稍候组装动态参数,可以是后台返回的注意是数组对象,不能采用拼接字符串的方式构造应采用下面方式进行构造设备型号 在datagrid的表头列特别多的情况下,不可能一个个的手写,这时就需要使用动态创建的方式,把表头列创建出来。 下面是datagrid中columns的格式 col...
阅读 2814·2021-11-25 09:43
阅读 2434·2021-10-09 09:44
阅读 2779·2021-09-22 15:49
阅读 2520·2021-09-01 11:43
阅读 2522·2019-08-30 14:16
阅读 428·2019-08-29 17:24
阅读 3007·2019-08-29 14:00
阅读 1358·2019-08-29 13:05