esayui

本文介绍使用 EasyUI 框架实现数据表格的功能,包括数据加载、编辑、导出等功能,并详细展示了如何通过 JavaScript 实现表格与表单之间的数据交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

$(function(){
$('#peopleGrid').datagrid({
url : contextPath + '/report/findPageByreporDetails.pvt',
//title : "<span id='propleGrid_title'> </span>",
pagination : true,
pageSize : 10,
rownumbers : true,
striped : true,
singleSelect : true,
idField : 'id',
nowrap : false,
fitColumns : false,
pagePosition : 'bottom',/*分页功能显示的位置*/
totalProperty : "total",/*总条数*/
rowsProperty : "repDetails",//后台传过来的json对象
onSelect:function(rowIndex,rowData){
//alert(rowData.id);//rowIndex:被双击行的索引,从 0 开始 rowData:被双击行对应的记录
$("#bottonShow").show();
$("#areaRange").val(rowData.areaRange);
$("#id").val(rowData.id);
$("#customer").val(rowData.customer);
$("#shNum").val(rowData.shNum);
$("#shThNum").val(rowData.shThNum);
$("#shFwNum").val(rowData.shFwNum);
$("#shHsNum").val(rowData.shHsNum);
$("#shZlNum").val(rowData.shZlNum);
$("#fhNum").val(rowData.fhNum);
$("#fhThNum").val(rowData.fhThNum);
$("#fhFwNum").val(rowData.fhFwNum);
$("#fhHsNum").val(rowData.fhHsNum);
$("#fhZlNum").val(rowData.fhZlNum);
$("#fhFxNum").val(rowData.fhFxNum);
$("#fhWfwxNum").val(rowData.fhWfwxNum);
$("#fhBxthNum").val(rowData.fhBxthNum);
$("#lcBcwxzNum").val(rowData.lcBcwxzNum);
$("#lcBcdlNum").val(rowData.lcBcdlNum);
$("#lcCjgtNum").val(rowData.lcCjgtNum);
$("#lcDwfsNum").val(rowData.lcDwfsNum);
$("#lcSzjNum").val(rowData.lcSzjNum);
$("#lcDfhNum").val(rowData.lcDfhNum);
$("#lcBfsbNum").val(rowData.lcBfsbNum);
$("#lcDcxwhNum").val(rowData.lcDcxwhNum);
$("#lcDkhfkNum").val(rowData.lcDkhfkNum);
$("#lcDkfwhNum").val(rowData.lcDkfwhNum);
$("#bwwxWxNum").val(rowData.bwwxWxNum);
$("#bwwxSrNum").val(rowData.bwwxSrNum);
$("#cqrsNum").val(rowData.cqrsNum);

window.isEditing = false;
$("#changeDate").dialog({
title : "修改数据"
}).dialog('open');
},
/* onCheck :function(rowIndex,rowData){
alert(rowIndex);//rowIndex:被双击行的索引,从 0 开始 rowData:被双击行对应的记录
},*/
frozenColumns : [[{
field : 'id',
checkbox : true
}]],
columns : [[ {
field : 'inputDate',//'(input_date)',
align : 'center',
width : 120,
title : "入库时间"
}, {
field : 'areaRange',//'(area_range)',
align : 'center',
width : 120,
title : "网点维修中心"
}, {
field : 'customer',
align : 'center',
width : 120,
title : "订单来源"
},{
field : 'shNum',//'(sh_num)',
align : 'center',
width : 120,
title : "收货票数"
}, {
field : 'shThNum',//'(sh_th_num)',
align : 'center',
width : 120,
title : "退/换(收货)"
}, {
field : 'shFwNum',//'(sh_fw_num)',
align : 'center',
width : 120,
title : "维修(收货)",
/*formatter:function(value,row,index){
return new Date(value).Fomat("yyyy/MM/dd");
}*/
}, {
field : 'shHsNum',//'(sh_hs_num)',
align : 'center',
width : 120,
title : "回收(收货)"
}, {
field : 'shZlNum',//'(sh_zl_num)',
align : 'center',
width : 120,
title : "租赁(收货)"
}, {
field : 'shQt1Num',//'(sh_qt1_num)',
align : 'center',
width : 120,
title : "其他1(收货)"
}, {
field : 'shQt2Num',//'(sh_qt2_num)',
align : 'center',
width : 120,
title : "其他2(收货)"
}, {
field : 'fhNum',//'(fh_num)',
align : 'center',
width : 120,
title : "发货票数"
}, {
field : 'fhThNum',//'(fh_th_num)',
align : 'center',
width : 120,
title : "退/换(发货)"
}, {
field : 'fhFwNum',//'(fh_fw_num)',
align : 'center',
width : 120,
title : "维修(发货)"
}, {
field : 'fhHsNum',//'(fh_hs_num)',
align : 'center',
width : 120,
title : "回收(发货)"
}, {
field : 'fhZlNum',//'(fh_zl_num)',
align : 'center',
width : 120,
title : "租赁(发货)"
}, {
field : 'fhFxNum',//'(fh_fx_num)',
align : 'center',
width : 120,
title : "翻新(发货)"
}, {
field : 'fhWfwxNum',//'(fh_wfwx_num)',
align : 'center',
width : 120,
title : "外发送修(发货)"
}, {
field : 'fhBxthNum',//'(fh_bxth_num)',
align : 'center',
width : 120,
title : "回收(收货)"
}, {
field : 'fhQt1Num',//'(fh_qt1_num)',
align : 'center',
width : 120,
title : "其他1(发货)"
}, {
field : 'fhQt2Num',//'(fh_qt2_num)',
align : 'center',
width : 120,
title : "其他2(发货)"
}, {
field : 'lcBcwxzNum',//'(lc_bcwxz_num)',
align : 'center',
width : 120,
title : "本厂维修中(留存)"
}, {
field : 'lcBcdlNum',//'(lc_bcdl_num)',
align : 'center',
width : 120,
title : "本厂待料(留存)"
}, {
field : 'lcCjgtNum',//'(lc_cjgt_num)',
align : 'center',
width : 120,
title : "待厂家沟通处理(留存)"
}, {
field : 'lcDwfsNum',//'(lc_dwfs_num)',
align : 'center',
width : 120,
title : "待外发送修(留存)"
}, {
field : 'lcSzjNum',//'(lc_dzj_num)',
align : 'center',
width : 120,
title : "待质检(留存)"
}, {
field : 'lcDfhNum',//'(lc_dfh_num)',
align : 'center',
width : 120,
title : "待发货(留存)"
}, {
field : 'lcBfsbNum',//'(lc_bfsb_num)',
align : 'center',
width : 120,
title : "不符三包退换条件(留存)"
}, {
field : 'lcDcxwhNum',//'(lc_dcxwh_num)',
align : 'center',
width : 120,
title : "待产线外呼(留存)"
}, {
field : 'lcDkfwhNum',//'(lc_dkfwh_num)',
align : 'center',
width : 120,
title : "待客服外呼(留存)"
}, {
field : 'lcDkhfkNum',//'(lc_dkhfk_num)',
align : 'center',
width : 120,
title : "待客户付款(留存)"
}, {
field : 'lcQt1Num',//'(lc_qt1_num)',
align : 'center',
width : 120,
title : "其他1(留存)"
}, {
field : 'lcQt2Num',//'(lc_qt2_num)',
align : 'center',
width : 120,
title : "其他2(留存)"
}, {
field : 'bwwxWxNum',//'(bwwx_wx_num)',
align : 'center',
width : 120,
title : "维修台数(保外维修)"
}, {
field : 'bwwxSrNum',//'(bwwx_sr_num)',
align : 'center',
width : 120,
title : "收入(保外维修)"
}, {
field : 'cqrsNum',//'(cqrs_num)',
align : 'center',
width : 120,
title : "出勤人数(总共)"
}, {
field :'insertname',
align : 'center',
width : 120,
title : "更新者的名字"
}, {
field : 'shRejectNum',//'(sh_reject_num)',
align : 'center',
width : 120,
title : "拒收"
}, {
field : 'inputYwsjDate',//'(input_ywsj_date)',
align : 'center',
width : 120,
title : "业务时间"
}]],
});
});
function aa(){
//window.open("../excel.zip");
window.location.href = contextPath + "/pc-rs/novatar.sample/excel.zip";
}
/*弹出from表单*/
window.onAdd = function() {
window.isEditing = false;
$("#peopleDialog").dialog({
title : $.i18n.get('add')
}).dialog('open');
}
window.importExcel = function(){
window.isEditing = false;
$("#importExcelBox").dialog({
title : "批量文件导入"
}).dialog('open');
//alert("123");
}
window.onimport = function(){
$("#importExcelForm").submit();
$("#importExcelBox").dialog('close');
}
window.exportExcel = function(){
//$("#exportExcelForm").attr('action',contextPath + download);
window.isEditing = false;
$("#exportExcelForm").dialog({
title : "批量文件导出"
}).dialog('open');
//$("#exportExcelForm").submit();
/* $.ajax({
url:contextPath + "/report/fileExport.pvt",
type:"post",
data:null,//form表单
contentType:'application/x-www-form-urlencoded',
dataType : 'json',
success:function(data) {

}
});*/
}
/*添加并验证*/
window.onsave = function() {
/* var name = $("#areaRange").val();
var code = $("#plantName").val();
var firmType = $('#firmType').combobox('getText');
var process = $("#process").val();
var num = $("#monthlynum").val();
var workTime = $("#formdate").datebox('getValue');
var updateName = $("#insertname").val();
var regular = /^[0-9]*$/;//数字正则
if(null == name || regular.test(name)|| name == ""){
info("名称不能为空或者数字");
return;
}else if(null == code || code == "" ){
info("工厂名称不能为空");
return;
}else
if(null == process || process == ""){
info("业务工序不能为空");
return;
}else
if(null == firmType || firmType == ""){
info("类型不能为空");
return;
}else
if(null == num || !regular.test(num)|| num == ""){
info("月度统计不能为空");
return;
}else
if(null == workTime || workTime == "" ){
info("时间不能为空");
return;
}*/
var aa = $("#updateForm").serializeJson();
//var aa = $("#peopleForm").serializeJson();//获取from表单转换成json格式的序列化
$.ajax({
url:contextPath + "/report/updatereport.pvt",
type:"post",
data:aa,//form表单
contentType:'application/x-www-form-urlencoded',
dataType : 'json',
success:function(data) {
if(data.success == true) {
$('#peopleGrid').datagrid('load', {});//刷新datagrid数据表格
$('#updateForm').form('clear');//清空from表单的属于框
info("保存成功");
$('#changeDate').dialog('close');//关闭from表单
}else{
$('#changeDate').dialog('close');
info("保存错误");
}
}
});
}

//验证输入框值 并提交表单
function subExportFrom(){
var beginTime = $("input[name='startTime']").val();//$("#startTime").val();
var endTime = $("input[name='endTime']").val();//$("#endTime").val();

if(null == beginTime || beginTime == ""){
info("必须选择开始时间");
return;
}else if(null == endTime || endTime == ""){
info("必须选择结束时间");
return;
}
var day = diffTime(beginTime,endTime);
if(day>31){
info("时间范围太大,不能超过一个月");
}else{
//进入提交表单导出数据代码块
//$("#exportExcelForm").attr("action","download");
$("#exportExcelForm").submit();
$("#exportExcelForm").dialog('close');
}
}

//计算时间差
function diffTime(startDate,endDate) {

var d1=new Date(startDate);

var d2=new Date(endDate);

var day = (d2-d1)/(24*60*60*1000);

return day;

}
/*esayui弹框*/
function info(alertinfo){
jQuery.messager.alert('提示:',alertinfo,'info');
}
/*时间转换格式*/
Date.prototype.Fomat = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
<think>好的,用户现在问到了EasyUI,我需要先确认他们的需求。之前他们问过Thymeleaf和JSON的集成,可能是在做前后端开发,现在可能是在寻找前端框架。EasyUI是一个jQuery-based的UI库,但近年来可能不如Vue或React流行,但仍有用户在使用。 首先,我需要介绍EasyUI的基本信息,包括它是什么、主要特点。然后要分析它的优缺点,因为用户可能想知道是否适合他们的项目。要注意对比现代框架,指出EasyUI的优势比如兼容性,以及不足比如过时性。 接下来,用户可能需要使用示例,所以提供一个简单的例子,展示如何用EasyUI创建组件,比如表格,这样他们可以快速上手。然后要考虑适用场景,比如内部管理系统,这样用户能判断是否符合他们的需求。 另外,用户可能想知道现在是否还推荐使用EasyUI,所以需要给出替代方案,比如Element UI或Ant Design,并说明现代框架的优势。最后,总结建议,根据项目需求选择,特别是维护旧项目或需要快速开发的情况。 还要注意用户可能没有提到的深层需求,比如学习成本、社区支持等,所以在优缺点里提到社区活跃度和维护情况。确保回答结构清晰,帮助他们做出决策。</think>EasyUI 是一个基于 jQuery 的轻量级前端 UI 框架,主要面向快速开发企业级后台管理系统。以下是关键要点: **核心特性** 1. **组件丰富**:提供 50+ 组件(DataGrid、Tree、ComboBox 等) ```html <!-- 典型表格组件 --> <table class="easyui-datagrid" data-options="url:&#39;data.json&#39;,fitColumns:true"> <thead> <tr> <th data-options="field:&#39;id&#39;,width:100">ID</th> <th data-options="field:&#39;name&#39;,width:100">名称</th> </tr> </thead> </table> ``` 2. **主题系统**:内置 10+ 皮肤主题(metro/bootstrap 风格等) ```html <link rel="stylesheet" href="themes/default/easyui.css"> ``` 3. **数据驱动**:通过 JSON 配置组件 ```javascript $(&#39;#dg&#39;).datagrid({ url: &#39;get_data.php&#39;, pagination: true, pageSize: 20 }); ``` **主要优势** - ⚡ 开发效率高:通过 HTML 属性快速初始化组件 - 🖥️ 浏览器兼容:支持 IE6+ 等老版本浏览器 - 📚 中文文档完善:官网提供详细中文文档 - 🧩 插件生态:支持扩展自定义组件 **典型应用场景** 1. 企业后台管理系统(ERP/OA等) 2. 数据展示类应用(报表系统) 3. 需要兼容老旧浏览器的项目 4. 快速原型开发 **技术栈配合** - 前端:jQuery + EasyUI - 后端:Java/PHP/.NET 等传统服务端语言 - 数据交互:主要通过 JSON 格式 **2023年现状分析** - 👍 仍在使用: - 大量遗留系统维护 - 政府/国企等保守技术栈场景 - 👎 逐渐淘汰: - 新项目更倾向 Vue/React 等现代框架 - 设计风格较陈旧 - 移动端适配较弱 **替代方案建议**(根据项目需求选择): 1. 现代框架:Element UI(Vue)、Ant Design(React) 2. 类似风格:Layui、DWZ JUI 3. 复杂场景:ExtJS、Webix **学习建议**: 1. 官网文档:[www.jeasyui.com](http://www.jeasyui.com) 2. 实战技巧: ```javascript // 动态加载数据 $(&#39;#dg&#39;).datagrid(&#39;load&#39;, { name: &#39;searchKey&#39;, status: 1 }); // 事件处理 $(&#39;#dg&#39;).datagrid({ onClickRow: function(index, row){ console.log(&#39;选中行数据:&#39;, row); } }); ``` 是否选择 EasyUI 取决于具体需求:适合需要快速开发传统管理系统且需
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值