通用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: '两次输入的密码不一致！'
}
});
最新文章
- Android apk集成
- 接口分离原则（Interface Segregation Principle）
- centos7精简版（minimal）killall: command not found
- js获取一个对象的所以属性和值
- flask 程序结构概括
- winform下重画ListBox
- ServiceManager 小结
- [转]数据库高可用架构(MySQL、Oracle、MongoDB、Redis)
- 蒙牛乳业六厂—第一家MES工厂
- ]用EnumChildWindows遍历窗口的方法
- C# winform 最小化到电脑右下角
- mybatis 的<![CDATA[ ]]>
- Linux系统的启动流程以及做个小小的Linux
- C语言数据类型的理解
- VS2008 动态库和静态库的生成和加载
- UVA - 699The Falling Leaves（递归先序二叉树）
- PHP不使用array_merge函数实现一维数组合并
- Java多线程之生产者消费者
- 【Qt编程】基于Qt的词典开发系列<三>--开始菜单的设计
- hbuilder vs2013api Access-Control-Allow-Origin