通用easyui查询页面组件

easyui查询页面组件使用指南

本组件开发需求：信息系统的查询页面基本是包括：搜索区域，列表显示区域，按钮条。

1.录入一个查询语句（如：select * from Strudents），录入列表显示参数：如一页最大记录条数，需求的按钮：添加，删除，修改等。

2..根据录入的查询语句生成列头。

3.维护生成的头，如：可以随意配置列头的位置，显示，排序等。

4.可以添加按钮。添加完成后， 得到一个guid，就可以显示查询页面。

5.有了查询视图，可扩展自定义报表功能，些功能把到2.0版本开发。

组件用到：jquery.jseasyui.js,way.js,artTemplate.js。

本组件可以完成脱离任何平台，只需修改一下就可以在Java，C#，PHP等平台使用。

1.本组件的配置页面用way.js来绑定后面数据，不依赖任何开发平台。

2.搜索框的自动生成用了artTemplate.js，不依赖任何开发平台。

3.easyui几套主题，如果样式跟目标系统有出入，可以自行选择，或自定义。

待扩展功能：高级查询。

源码：http://www.51aspx.com/code/codename/52159

步骤1：

建表脚本：

USE [QuickDevDB]

GO

/****** Object:  Table [dbo].[Students]    Script Date: 01/25/2016 15:24:16 ******/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

SET ANSI_PADDING ON

GO

CREATE TABLE [dbo].[Students](

[PKID] [uniqueidentifier] NULL,

[StudentName] [nvarchar](100) NULL,

[Age] [int] NULL,

[Tel] [varchar](50) NULL

) ON [PRIMARY]

GO

SET ANSI_PADDING OFF

GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'名字' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Students', @level2type=N'COLUMN',@level2name=N'StudentName'

GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'年龄' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Students', @level2type=N'COLUMN',@level2name=N'Age'

GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'电话' , @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Students', @level2type=N'COLUMN',@level2name=N'Tel'

GO

备注：字段的说明最好写上，代码会自己帮你生成列头。

步骤2：

配置视图：

右边是功能菜单树，可以把数据源改成目标系统功能菜单，进行功能页面管理。

按钮配置，列头信息配置等。

添加完视图后会生成一个guid,可以复制到具体页面中即可生成查询页面。（也可以自动生成，这些就不写了！因为自动化后不好扩展。实现思路：在功能页面可以获取得到视图的GUID，拿到GUID转给一个公共页面，就可以自动生成。）

步骤3：

生成的页面：

Html代码：

后台：

验证类型参考：

$.extend($.fn.validatebox.defaults.rules, {

idcard: {// 验证身份证

validator: function (value) {

return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);

},

message: '身份证号码格式不正确'

},

minLength: {

validator: function (value, param) {

return value.length >= param[0];

},

message: '请输入至少（2）个字符.'

},

length: {

validator: function (value, param) {

var len = $.trim(value).length;

return len >= param[0] && len <= param[1];

},

message: "输入内容长度必须介于{0}和{1}之间."

},

phone: {// 验证电话号码

validator: function (value) {

return /^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);

},

message: '格式不正确,请使用下面格式:020-88888888'

},

mobile: {// 验证手机号码

validator: function (value) {

return /^(13|15|18)\d{9}$/i.test(value);

},

message: '手机号码格式不正确'

},

intOrFloat: {// 验证整数或小数

validator: function (value) {

return /^\d+(\.\d+)?$/i.test(value);

},

message: '请输入数字，并确保格式正确'

},

currency: {// 验证货币

validator: function (value) {

return /^\d+(\.\d+)?$/i.test(value);

},

message: '货币格式不正确'

},

qq: {// 验证QQ,从10000开始

validator: function (value) {

return /^[1-9]\d{4,9}$/i.test(value);

},

message: 'QQ号码格式不正确'

},

integer: {// 验证整数 可正负数

validator: function (value) {

//return /^[+]?[1-9]+\d*$/i.test(value);

return /^([+]?[0-9])|([-]?[0-9])+\d*$/i.test(value);

},

message: '请输入整数'

},

age: {// 验证年龄

validator: function (value) {

return /^(?:[1-9][0-9]?|1[01][0-9]|120)$/i.test(value);

},

message: '年龄必须是0到120之间的整数'

},

chinese: {// 验证中文

validator: function (value) {

return /^[\Α-\￥]+$/i.test(value);

},

message: '请输入中文'

},

english: {// 验证英语

validator: function (value) {

return /^[A-Za-z]+$/i.test(value);

},

message: '请输入英文'

},

unnormal: {// 验证是否包含空格和非法字符

validator: function (value) {

return /.+/i.test(value);

},

message: '输入值不能为空和包含其他非法字符'

},

username: {// 验证用户名

validator: function (value) {

return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);

},

message: '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'

},

faxno: {// 验证传真

validator: function (value) {

//            return /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/i.test(value);

return /^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);

},

message: '传真号码不正确'

},

zip: {// 验证邮政编码

validator: function (value) {

return /^[1-9]\d{5}$/i.test(value);

},

message: '邮政编码格式不正确'

},

ip: {// 验证IP地址

validator: function (value) {

return /d+.d+.d+.d+/i.test(value);

},

message: 'IP地址格式不正确'

},

name: {// 验证姓名，可以是中文或英文

validator: function (value) {

return /^[\Α-\￥]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);

},

message: '请输入姓名'

},

date: {// 验证时间格式

validator: function (value) {

//格式yyyy-MM-dd或yyyy-M-d

return /^(?:(?!0000)[0-9]{4}([-]?)(?:(?:0?[1-9]|1[0-2])\1(?:0?[1-9]|1[0-9]|2[0-8])|(?:0?[13-9]|1[0-2])\1(?:29|30)|(?:0?[13578]|1[02])\1(?:31))|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)([-]?)0?2\2(?:29))$/i.test(value);

},

message: '清输入合适的日期格式'

},

msn: {

validator: function (value) {

return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);

},

message: '请输入有效的msn账号(例：abc@hotnail(msn/live).com)'

},

same: {

validator: function (value, param) {

if ($("#" + param[0]).val() != "" && value != "") {

return $("#" + param[0]).val() == value;

} else {

return true;

}

},

message: '两次输入的密码不一致！'

}

});