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: '两次输入的密码不一致!'

}

});

通用easyui查询页面组件的更多相关文章

  1. Winform开发框架之通用高级查询模块--SNF快速开发平台3.3-Spring.Net.Framework

    最近项目确实忙,但也是一直忙于有关项目和框架技术的事情,也一直致力于改善我的WInform开发框架.使得自己及客户使用起来更加方便,更加友好,更加高效. 在很多程序模块中都很常见,也是给客户扩展查询的 ...

  2. Atitit easyui翻页组件与vue的集成解决方案attilax总结

    Atitit easyui翻页组件与vue的集成解决方案attilax总结 ===============使用1 ===========\paggingUtil_easyui_vue.js2 C:\U ...

  3. 利用Bootstrap框架制作查询页面的界面

    UI设计实战篇——利用Bootstrap框架制作查询页面的界面   Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...

  4. 基于.net的通用内存缓存模型组件

    谈到缓存,我们自然而然就会想到缓存的好处,比如: 降低高并发数据读取的系统压力:静态数据访问.动态数据访问 存储预处理数据,提升系统响应速度和TPS 降低高并发数据写入的系统压力 提升系统可用性,后台 ...

  5. css页面组件

    页面组件 1 元素的尺寸/边框/背景 1.1 css尺寸相关属性 height 高度 min-height 最小高度 max-height 最大高度 width 宽度 min-width 最小宽度 m ...

  6. EasyUI的treegrid组件动态加载数据问题的解决办法

    http://www.jquerycn.cn/a_3455 —————————————————————————————————————————————————————————————————————— ...

  7. HTML5/CSS3 第二章页面组件

    页面组件 1 元素的尺寸/边框/背景 1.1 css尺寸相关属性 height 高度 min-height 最小高度 max-height 最大高度 width 宽度 min-width 最小宽度 m ...

  8. 基于.net的分布式系统限流组件 C# DataGridView绑定List对象时,利用BindingList来实现增删查改 .net中ThreadPool与Task的认识总结 C# 排序技术研究与对比 基于.net的通用内存缓存模型组件 Scala学习笔记:重要语法特性

    基于.net的分布式系统限流组件   在互联网应用中,流量洪峰是常有的事情.在应对流量洪峰时,通用的处理模式一般有排队.限流,这样可以非常直接有效的保护系统,防止系统被打爆.另外,通过限流技术手段,可 ...

  9. 基于HBuilderX+UniApp+ThorUI的手机端前端的页面组件化开发经验

    现在的很多程序应用,基本上都是需要多端覆盖,因此基于一个Web API的后端接口,来构建多端应用,如微信.H5.APP.WInForm.BS的Web管理端等都是常见的应用.本篇随笔继续分析总结一下项目 ...

随机推荐

  1. java数学函数库 API(转)

    原文地址:http://www.24xuexi.com/w/2011-11-08/98206.html 首先给大家看看Math类所提供的主要方法,下面的列表给出了Math类的主要方法,如果要理解Mat ...

  2. Java使用snakeyaml解析yaml

    YAML Yaml是一种"是一个可读性高并且容易被人类阅读,容易和脚本语言交互,用来表达资料序列的编程语言."类似于XML但比XML更简洁,语法详见 http://www.ruan ...

  3. SVN 使用

    我是一个前端,svn 的服务器配置也是后端弄好的,到底怎么弄的不清楚. 最开始是想和xcode关联起来,每次提交代码也方便,但是在Xcode里的偏好设置Accounts 模块 添加了SVN 服务端地址 ...

  4. WebApi系列~实际项目中如何使用HttpClient向web api发异步Get和Post请求并且参数于具体实体类型

    回到目录 本讲比较实际,在WEB端有一个Index和Create方法,用来从web api显示实体列表数据和向api插入实体对象,这就是以往的网站,只不过是把数据持久化过程放到了web pai上面,它 ...

  5. 搭建hexo博客

    hexo 是一款快速.简单.并且强大的博客博客模板框架 - 基于nodejs . 特点 基于nodejs 使用Markdown书写文章 无需数据库 可以使用GitHub Pages发布 要用到的模块 ...

  6. C#学习系列-this的使用

    如有错误,欢迎指正. 1.代表当前类,在当前类中可使用this访问当前类成员变量和方法(需要注意的是 静态方法中不能使用this),也可用于参数传递,传递当前对象的引用. 下面贴代码: class P ...

  7. 每天一个linux命令(17):whereis 命令

    whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息. 和find相比,whereis查找的速度非 ...

  8. PHP将富文本编辑后的内容,去除样式图片等只保留txt文本内容

    1.从数据库读取富文本内容样式如下: <p style=";text-indent: 0;padding: 0;line-height: 26px"><span ...

  9. Enterprise Solution 开发框架功能点

    1. 通用查询模块,可以通过关联数据库表,存储过程或程序代码开发查询,多个查询之间也可构成主从关联查询. 2. 业务异常处理 支持统一的异常处理. 3. 内置一个简单的SQL Server查询分析器, ...

  10. JS之模板技术(aui / artTemplate)

    artTemplate是个好东西啊,一个开源的js前端模板引擎,使用简单,渲染效率特别的高. 我经常使用这个技术来在前端动态生成新闻列表,排行榜,历史记录等需要在前端列表显示的信息. 下面是artTe ...