`
y806839048
  • 浏览: 1127663 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

easy ui form 结合 ajax参数

    博客分类:
  • form
阅读更多
<cui:form id="eventStatics" name="eventStatics" >
<table id="event" >
<tr>
<td style="width: 100px;padding-top: 10px;" align="right">
<label>告警类型:</label>
</td>
<td>
<cui:combobox id="eventType" name="type" width="160" emptyText="全部" method="get" url="${ctx}/tbalarm!querySafeAlarmType.json"></cui:combobox>
</td>
<td style="width: 100px;padding-top: 10px;" align="right">
<label>告警状态:</label>
</td>
<td>
<cui:combobox id="eventStatus" name="eventStatus" width="160" emptyText="全部" method="get" url="${ctx}/statics!querySafeAlarmStatus.json"></cui:combobox>
</td>
<td style="vertical-align: middle;padding-left: 30px;"  rowspan="2">
<cui:button id="eventSearchBtn" label="统 计" onClick="eventStatics" ></cui:button>
<cui:button id="eventResetBtn" label="重 置" onClick="reset" ></cui:button>
</td>
</tr>
<tr>
<td style="width: 100px;padding-top: 10px;" align="right">
<label>时  间:</label>
</td>
<td >
<cui:datepicker id="eventStartDate" name="eventStartDate" dateFormat="yyyy-MM-dd" showOn="button" width="160"/>
</td>
<td style="width: 100px;padding-top: 10px;" align="center">
<label>至:</label>
</td>
<td>
<cui:datepicker id="eventEndDate" name="eventEndDate" dateFormat="yyyy-MM-dd" showOn="button" width="160"/>
</td>
</tr>
</table>
</cui:form>



//ajax部分提交的data参数也等同于form的表单的参数提交,后天的action,model也照样能接收到


//最长处理时长Top10--事件工单
    function eventTypeStatics(eventBeginDate,eventEndDate,eventType,eventStatus){
    require(['echarts','echarts/chart/bar'],type);  
var typeChart;
var re;
        function type(ec) {
        typeChart = ec.init(document.getElementById('eventArea'));
       
typeChart.showLoading({
    text : '努力加载数据中...',
    textStyle : {
        fontSize : 20
    },
    effect : 'ring'
});

var sourceData = new Array();
var countData = new Array();
$.ajax({
url:'${ctx}/statics!queryNetAlarmTopStatics.json',
type:'POST',
data:{'beginTime':eventBeginDate,'endTime':eventEndDate,'typeMessage':eventType,'toolMessage':eventStatus},
async:false,
success:function(result){ 
   re = result.data;
for(var i =0 ;i<re.length;i++){
var datas = re[i];
sourceData = datas.sourceData;
var counts = datas.countData;
for(var j =0;j<sourceData.length;j++){
countData.push({'value':counts[j],'name':sourceData[j]});
}
}
}
});
}
分享到:
评论

相关推荐

    jQuery easy-ui 富客户端AJAX框架

    1. **组件丰富**:Easy-UI 提供了多种用户界面组件,如对话框(dialog)、表单(form)、面板(panel)、菜单(menu)、下拉选择框(combobox)、树形控件(tree)、表格(datagrid)等,满足开发各种复杂页面的需求...

    jquery easy ui 中文帮助

    4. **Ajax 交互(Ajax Interactions)**: 组件支持异步数据加载,如 Grid 的分页加载、Tree 的异步加载等,实现与服务器的无刷新通信。 ### 三、主要组件详解 1. **Dialog(对话框)**: 用于显示弹出式窗口,可以...

    jquery easy-ui

    - **表单(Form)**: 支持各种输入类型,如文本框、下拉框、复选框等,并且提供了验证功能,确保用户输入的数据符合预期格式。 - **表格(Grid)**: 可以展示大量数据,支持排序、分页、过滤、编辑等功能。同时,...

    easy UI实现的界面原型

    Easy UI 是一种轻量级的前端开发框架,专为快速构建美观、易用的界面原型而设计。本文将深入探讨如何利用Easy UI 实现一个界面原型,特别是以"StudentSystem"为例。 Easy UI 是基于JavaScript库jQuery的,它提供了...

    jquery api 、 jquery easy ui

    2. **表单组件**: 包括`form`(表单)、`textbox`(文本框)、`combobox`(下拉框)、`datetimebox`(日期时间框)等,方便用户输入和验证数据。 3. **数据展示组件**: 如`datagrid`(数据网格)、`treegrid`(树形...

    jquery-easy-ui demo

    标题“jquery-easy-ui demo”表明我们将探讨这个框架的一些实际应用和示例,而“很好用的”描述则暗示了其易用性和实用性。 一、jQuery EasyUI 概述 jQuery EasyUI 是基于 jQuery 的轻量级框架,它集成了大量的 UI ...

    最新jquery-easy-ui

    在这个名为“最新jquery-easy-ui”的压缩包中,我们重点关注的是版本 1.2.6。 ### 1. jQuery 基础 jQuery 是一个流行的 JavaScript 库,它简化了 DOM 操作、事件处理、动画以及 Ajax 交互。EasyUI 建立在 jQuery ...

    jquery easy ui+ssh 增删改查例子

    在IT行业中,jQuery EasyUI和SSH(Struts2、...这个例子项目为初学者提供了实际操作的机会,通过它,你可以学习如何将jQuery EasyUI的前端组件与SSH的后端框架相结合,实现完整的CRUD功能,进一步提升Web开发技能。

    easy_ui 模型

    4. **前端与后端的交互**:学习如何通过Ajax或Form提交实现前后端的数据通信。 5. **JSP和EL表达式**:理解如何在JSP页面中使用JSP标签和EL表达式来动态显示数据。 6. **数据库操作**:如果示例涉及数据库,会包含...

    juqery Easy ui

    jQuery 提供了简化 DOM 操作、事件处理、动画效果以及Ajax请求等功能。 2. **EasyUI 组件**:EasyUI 包含了大量的组件,例如: - **对话框(Dialog)**:用于创建模态或非模态对话框,可以设置标题、大小、按钮等...

    Easy-Ui简单后台搭建

    在"Easy-Ui简单后台搭建"的实践中,我们需要结合后端接口,通过Ajax技术实现数据的异步交互,这样可以让后台系统更加实时和高效。同时,合理运用Easy-Ui的组件和API,可以减少重复工作,提升开发效率。 总的来说,...

    jquery-easy-ui-1.3.2

    这个框架的核心理念是“Easy”,旨在简化Web开发过程中与用户交互界面相关的复杂性。在版本1.3.2中,它已经相当成熟和完善,包含了众多实用的功能,如对话框、表单、树形结构、表格、菜单等,大大提升了开发效率。 ...

    jquery easy ui 1.3.1

    4. **数据绑定**:与后端数据源紧密集成,支持 AJAX 数据加载,实现页面的动态更新和数据交互。 5. **易用性**:基于 jQuery,学习曲线平缓,通过简单的 JavaScript 调用即可实现复杂的功能。 **二、jQuery EasyUI...

    jquery_easy_ui

    EasyUI 提供了诸如对话框(Dialog)、表格(Grid)、菜单(Menu)、按钮(Button)、表单(Form)等常见的UI元素,使得网页界面设计变得更加便捷和高效。 1. **jQuery 基础**:EasyUI 是建立在 jQuery 库之上的,...

    扩展easyUI,上传文件时附传参数

    由于参数是以JSON格式发送的,服务器端可能需要使用JSON库(如Jackson或Gson)来解析它们,并结合文件数据进行业务处理。 4. **验证与反馈**:在文件上传成功后,服务器通常会返回一个响应,告知客户端操作结果。在...

    Json 格式分页、Jquery easy ui 增删改查例子

    JQuery EasyUI 是一个基于jQuery的UI库,它提供了一系列组件,如表格、下拉框、按钮等,使得开发者可以快速构建用户界面。在进行增删改查操作时,EasyUI的`datagrid`组件尤其有用。它不仅可以展示数据,还支持分页、...

    jeasyui-win-dlg1.zip_easy

    首先,jQuery Easy UI的核心是jQuery库,它是一个轻量级的JavaScript库,为开发者提供了便捷的DOM操作、事件处理、动画效果和Ajax交互等功能。Easy UI则在此基础上构建了一系列的UI组件,如表格、下拉框、按钮、...

    jQuery实现form表单reset按钮重置清空表单功能

    有时候可能需要实现这样的效果:使用ajax提交表单,成功提交表单之后清空表单,如下代码: 代码如下: &lt;form&gt; &lt;input name=”name1″ /&gt; &lt;input name=”name1″ /&gt; &lt;textarea name=”...

    EasyUI实现简易图书管理系统

    - **组件**: EasyUI提供了如表格(datagrid)、下拉框(combobox)、树形结构(tree)等常见UI组件,这些组件可以帮助开发者快速构建各种功能模块。 - **主题**: EasyUI支持多种预设主题,可以通过简单的配置改变...

    通用数据访问层及Ajax服务端框架源码20110907

    4. 客户端UI使用JQuery Easy-UI 5. 虽然没有使用Asp.net MVC框架,但却使用了MVC思想。 通用数据访问层 及 Ajax服务端框架 的技术特性: 数据访问层设计目标 调用存储过程,不管输入参数多么复杂,不管有多少输出...

Global site tag (gtag.js) - Google Analytics