基于JQuery框架的报表系统数据交互应用

2018-02-17彭胜

有色金属加工 2018年3期

彭胜

(中铝国际工程股份有限公司，北京 100093)

JQuery是一个快速、简洁的JavaScript框架。报表系统开发时经常需要实现界面传值到后台，通过参数进行查询，并且将查询结果通过函数数据传过来，最后显示到界面上。这样的功能通过JQuery EasyUI、Ajax、Json以及一般处理程序之间的相互配合更容易实现。

1 关键技术

JQuery EasyUI是一组基于jQuery的UI插件集合，用来帮助WEB开发者更轻松的打造出功能丰富并且美观的UI界面。开发者无需编写复杂的javascript，也无需对css样式有深入的了解，只需要借助一些简单的html标签，如combobox、menu、dialog、tabs、validatebox、datagrid、window、tree等，即可以使用JQuery EasyUI提供的大量丰富的UI控件。

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。传统的网页(不使用 Ajax)如果需要更新内容，必须重载整个网页页面，容易增加服务器负荷；另一方面数据量大时用户操作友好性大大降低。通过使用Ajax在后台与服务器进行少量数据交换，可以使网页实现异步更新，即整个网页不重新加载，仅对网页的局部根据需要进行更新，更快更友好的对用户操作进行响应。

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式,它采用完全独立于编程语言的文本格式来存储和表示数据。JSON数据对象更易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。JSON简洁和清晰的层次结构使它成为理想的数据交换语言，通过JSON格式可以很方便的实现前台数据和后台模型间的交互。

在Asp.net中，请求的真正处理是在处理程序这个环节。处理程序负责完成实际的请求处理工作，对于开发者来说，大多数的开发工作都是围绕着处理程序展开的。在Asp.net中，所有的处理程序类必须实现IHttpHandler接口(同步)或者实现IHttpAsyncHandler接口(异步)。Process Request是IHttpHandler接口的主要方法，接收并通过一个HttpContext类型的请求上下文对象，处理程序可以得到关于处理请求所需的信息。通过 HttpContext的Response属性可以得到响应的对象，用以向客户端返回服务器处理的结果。

2 数据格式转换

在EasyUI中使用Ajax+Json实现前后的数据交互时，当后台数据传输到客户端时需对Json数据进行解析，有两种数据解析方式：

(1) 对于服务器返回的数据若没有做类型说明，需要将接收的字符串做对象化处理，即用eval()方法进行处理。eval函数可将一个JavaScript代码字符串求值成特定的对象，利用其可以完成JSON对象的解析。eval()解析JSON字符串要加上括号， Json对象是“{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，加上圆括号为了处理字符串为表达式，而不是语句(statement)来执行。示例如下：

alert(eval("{}")); // return undefined

alert(eval("({})"));// return object[Object]

IE8以上版本浏览器可支持JSON.parse函数，能解析属性名是双引号包裹的字符串对象，并会忽略换行和空格(值外面)，其对JSON字符串的规范性要求较高。

(2)直接对ajax中的dataType属性进行设置，将其设置为Json，也可以实现Json的解析：

$.ajax({

type: "POST",

url: "../JSON/ Project.ashx?Order=Delete",

data: { id: id },

dataType: "json",

success: function (json) {

if (json.result) {$.messager.alert("提示", "删除成功", "info");}

else {$.messager.alert("提示", "删除信息失败!", "info");}

}

});

3 页面数据显示功能

通过EasyUI的相应控件(panel、datagrid等)，可以轻松的实现同类数据的列表显示功能；通过easyui-datagrid的toolbar工具栏设置，实现查询等其他列表数据的操作。

举例，页面定义如下：

为实现数据的正确加载，需要在html页面载入后加载该列表数据并进行显示；在数据查询条件单击查询按钮后可以对列表数据进行筛选刷新，相应实现js代码如下：

$(document).ready(function () {

$(′#tt′).datagrid({

url: ′../JSON/ Project.ashx?Order=SelectProjList′ ,

财务公司的运营与发展实际上与企业集团的战略发展有紧密的联系，但是很多财务公司在产业链金融方面没有体现出企业集团的战略性。很多企业集团对于财务公司来说有绝对的控制权，很多时候都将财务公司看作原有资金管理的补充，因此，财务公司在职能上只是简单等价于商业银行，有时候还会把企业子公司的管理制度应用于财务公司而导致财务公司承担自身职责以外的任务，影响财务公司科学地运营。部分企业集团在对财务公司的评价中过度的追求经济效益，没有体现出财务公司与企业集团的长远发展，因此财务公司开展产业链金融服务也缺乏良好的战略性。

columns: [[{ field: ′rowId′, title:′序号′, width: 40, align:′center′},

{ field: ′ProjectName′, title:′项目名称′, width: 120 },

{ field: ′CustomerName′, title:′客户名称′, width: 80 }]],

pagination: false,

rownumbers: true,

});

}