EASYUI表单扩展

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

<title>禁止访问</title>

<script type=”text/javascript” src=”jquery-1.4.4.min.js”></script>

<script type=”text/javascript” src=”jquery.easyui.min.js”></script>

<link rel=”stylesheet” type=”text/css” href=”themes/default/easyui.css”>

<link rel=”stylesheet” type=”text/css” href=”themes/icon.css”>

<script>

<!– 导入jquery.js  和easy_ui.js 自定义自己的 JS  家庭地址 是验证密码的–>

$(function(){

  $(‘#uiform input’).each(function () {

            if ($(this).attr(‘required’) || $(this).attr(‘validType’))

                $(this).validatebox();

        })

});

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

    CHS: {

        validator: function (value, param) {

            return /^[\u0391-\uFFE5]+$/.test(value);

        },

        message: ‘请输入汉字’

    },

    ZIP: {

        validator: function (value, param) {

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

        },

        message: ‘邮政编码不存在’

    },

    QQ: {

        validator: function (value, param) {

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

        },

        message: ‘QQ号码不正确’

    },

    mobile: {

        validator: function (value, param) {

            return /^((\(\d{2,3}\))|(\d{3}\-)) 13\d{9}$/.test(value);

        },

        message: ‘手机号码不正确’

    },

    loginName: {

        validator: function (value, param) {

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

        },

        message: ‘登录名称只允许汉字、英文字母、数字及下划线。’

    },

    safepass: {

        validator: function (value, param) {

            return safePassword(value);

        },

        message: ‘密码由字母和数字组成,至少6位’

    },

    equalTo: {

        validator: function (value, param) {

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

        },

        message: ‘两次输入的字符不一至’

    },

    number: {

        validator: function (value, param) {

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

        },

        message: ‘请输入数字’

    },

    idcard: {

        validator: function (value, param) {

            return idCard(value);

        },

        message:’请输入正确的身份证号码’

    }

});

/* 密码由字母和数字组成,至少6位 */

var safePassword = function (value) {

    return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\ \\\/\’\”]*)|.{0,5})$|\s/.test(value));

}

var idCard = function (value) {

    if (value.length == 18 && 18 != value.length) return false;

    var number = value.toLowerCase();

    var d, sum = 0, v = ’10×98765432′, w = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2], a = ‘11,12,13,14,15,21,22,23,31,32,33,34,35,36,37,41,42,43,44,45,46,50,51,52,53,54,61,62,63,64,65,71,81,82,91’;

    var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/);

    if (re == null || a.indexOf(re[1]) < 0) return false;

    if (re[2].length == 9) {

        number = number.substr(0, 6) + ’19’ + number.substr(6);

        d = [’19’ + re[4], re[5], re[6]].join(‘-‘);

    } else d = [re[9], re[10], re[11]].join(‘-‘);

    if (!isDateTime.call(d, ‘yyyy-MM-dd’)) return false;

    for (var i = 0; i < 17; i++) sum += number.charAt(i) * w[i];

    return (re[2].length == 9 || number.charAt(17) == v.charAt(sum % 11));

}

var isDateTime = function (format, reObj) {

    format = format || ‘yyyy-MM-dd’;

    var input = this, o = {}, d = new Date();

    var f1 = format.split(/[^a-z]+/gi), f2 = input.split(/\D+/g), f3 = format.split(/[a-z]+/gi), f4 = input.split(/\d+/g);

    var len = f1.length, len1 = f3.length;

    if (len != f2.length || len1 != f4.length) return false;

    for (var i = 0; i < len1; i++) if (f3[i] != f4[i]) return false;

    for (var i = 0; i < len; i++) o[f1[i]] = f2[i];

    o.yyyy = s(o.yyyy, o.yy, d.getFullYear(), 9999, 4);

    o.MM = s(o.MM, o.M, d.getMonth() + 1, 12);

    o.dd = s(o.dd, o.d, d.getDate(), 31);

    o.hh = s(o.hh, o.h, d.getHours(), 24);

    o.mm = s(o.mm, o.m, d.getMinutes());

    o.ss = s(o.ss, o.s, d.getSeconds());

    o.ms = s(o.ms, o.ms, d.getMilliseconds(), 999, 3);

    if (o.yyyy + o.MM + o.dd + o.hh + o.mm + o.ss + o.ms < 0) return false;

    if (o.yyyy < 100) o.yyyy += (o.yyyy > 30   1900 : 2000);

    d = new Date(o.yyyy, o.MM – 1, o.dd, o.hh, o.mm, o.ss, o.ms);

    var reVal = d.getFullYear() == o.yyyy && d.getMonth() + 1 == o.MM && d.getDate() == o.dd && d.getHours() == o.hh && d.getMinutes() == o.mm && d.getSeconds() == o.ss && d.getMilliseconds() == o.ms;

    return reVal && reObj   d : reVal;

    function s(s1, s2, s3, s4, s5) {

        s4 = s4 || 60, s5 = s5 || 2;

        var reVal = s3;

        if (s1 != undefined && s1 != ” || !isNaN(s1)) reVal = s1 * 1;

        if (s2 != undefined && s2 != ” && !isNaN(s2)) reVal = s2 * 1;

        return (reVal == s1 && s1.length != s5 || reVal > s4)   -10000 : reVal;

    }

};

</script>

</head>

<body>

<table class=”grid” id=”uiform”>

<tr><td>登录名:</td><td><input  required=”true” id=”txtUsername” type=”text” class=”txt03″ /></td><td>真实姓名:</td><td><input id=”txtTruename” validType=”CHS” required=”true” type=”text” class=”txt03″ /></td></tr>

<tr><td>登录密码:</td><td><input validType=”safepass”  required=”true” id=”txtPassword” name=”password” type=”password” class=”txt03″ /></td><td>Email:</td><td><input id=”txtEmail” name=”email”  validType=”email” type=”text” class=”txt03″ /></td></tr>

<tr><td>身份证号:</td><td><input validType=”idcard” id=”txtIdcard” name=”idcard” type=”text” class=”txt03″ /></td><td>QQ:</td><td><input validType=”QQ” id=”txtQq” name=”qq” type=”text” class=”txt03″ /></td></tr>

<tr><td>手机:</td><td><input validType=”mobile” id=”txtMobile” name=”mobile” type=”text” class=”txt03″ /></td><td>电话:</td><td><input id=”txtTel” name=”tel” type=”text” class=”txt03″ /></td></tr>

<tr><td>家庭住址:</td><td colspan=”3″><input validType=”equalTo[txtMobile]” style=”width:80%” id=”txtHomeaddr” name=”homeaddr” type=”text” class=”txt03″ /></td></tr>

<tr><td>备注:</td><td colspan=”3″> <input type=”text” style=”width:80%” class=”txt03″ id=”txtRemark”></textarea></td></tr>

<tr><td>&nbsp;</td><td colspan=”3″><input id=”Checkbox1″ type=”checkbox” /><label>超级管理员</label>&nbsp;&nbsp;<input id=”Checkbox2″ type=”checkbox” /><label>禁用</label></td></tr>

</table

</body>

</html>

jquery组件精选

JQUERY MODAL DIALOG

说明:一个带关闭、可拖拽的对话框,适合用于信息提示
主页:http://plugins.jquery.com/project/modaldialog
演示:http://tautologistics.com/projects/jquery.modaldialog/doc/1.0.0/

SIMPLEMODAL

说明:屏蔽底层,在页面中间显示一个提示框
主页:http://plugins.jquery.com/project/SimpleModal
演示:http://www.ericmmartin.com/projects/simplemodal/

image combobox

说明:生成自定样式、内含图片的下拉框
主页:http://plugins.jquery.com/project/image-combobox
演示:http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/jquery-image-dropdown-2.1/index.html

FullCalendar

说明:一个包含有月、周、日视图的日历组件
主页:http://plugins.jquery.com/project/fullcalendar
演示:http://arshaw.com/fullcalendar/

jMonthCalendar

说明:一个只有月视图的日历组件
主页:http://plugins.jquery.com/project/jMonthCalendar
演示:http://www.bytecyclist.com/SourceCode/jMonthCalendar/1.3.0-beta/Demo.html

jQuery Week Calendar

说明:一个只有周视图的日历/事件组件
主页:http://plugins.jquery.com/project/weekcalendar
演示:http://jquery-week-calendar.googlecode.com/svn/trunk/jquery.weekcalendar/full_demo/weekcalendar_full_demo.html

jQuery UI Datepicker Project

说明:一个弹出窗口式日期选择组件,适合在文本框处使用
主页:http://plugins.jquery.com/project/jquery-calendar
演示:http://jqueryui.com/demos/datepicker/default.html

jQuery UI on Google Maps

说明:在 Google Map 上使用 jQuery 的漂亮UI
主页:http://plugins.jquery.com/project/jquery-calendar
演示:http://marcgrabanski.com/pages/code/jquery-ui-google-maps

mcDropdown jQuery Plug-in

说明:在下拉框中以多级菜单方式选择项目
主页:http://plugins.jquery.com/project/mcdropdown
演示:http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm

mb.jQuery.components!

说明:超炫的显示方式
主页:http://pupunzi.com/#mb.components/components.html
演示:http://pupunzi.com/#mb.components/components.html

jQuery.validity

说明:表单内容验证
主页:http://plugins.jquery.com/project/validity
演示:http://validity.thatscaptaintoyou.com/

Supersized

说明:一个体验超棒的全屏图片展示
主页:http://plugins.jquery.com/project/Supersized
演示:http://buildinternet.com/project/supersized/default.php

cookies

说明:JS Cookie 操作库
主页:http://plugins.jquery.com/project/cookies
演示:http://code.google.com/p/cookies/

JQuery Twitter Suggestion

说明:仿 Twitter 登录风格的文本框提示
主页:http://plugins.jquery.com/project/twitterSuggestion
演示:http://www.enricofoschi.com/jquery/twittersuggestion/

MopBox

说明:效果超棒的弹出对话框,可做多页图文展示
主页:http://plugins.jquery.com/project/mopbox
演示:http://www.mopstudio.jp/mopBox2demo.html

UI.Layout

说明:适合做 Web 应用时做布局,上下左右都可隐藏
主页:http://plugins.jquery.com/project/Layout
演示:http://layout.jquery-dev.net/demos/simple.html

         http://layout.jquery-dev.net/demos.cfm

《jQuery权威指南》

jQuery权威指南

《jQuery权威指南》前言

    
“工欲善其事,必先利其器”。作为一名从事Web开发多年的工作者,我对每一种新技术的出现与应用都充满了渴望与期待,渴望它能解决现存疑难,进一步提高
程序开发的效率;期待它能超越旧俗,引领技术未来的发展方向。近年来,Web开发领域的新技术和新工具层出不穷,它们的出现极大地推动了Web开发技术的
发展,其中jQuery的诞生在Web技术的发展进程中具有划时代的意义。
   
jQuery发布于2006年,它因为易于使用、功能强大、展现优雅、兼容性极佳而迅速赢得了Web开发者的钟爱,不断地吸引着全球开发者社区的技术爱好
者、精英和专家们加入其阵营。这也使得它在众多的JavaScript框架中脱颖而出,几近成为Web开发领域的事实标准。恰好是在2006
年,jQuery也深深地吸引了我,令我从此深陷其中。
   
随着Web开发技术的发展,以及用户对应用体验的要求日益提高,当我们要开发一个Web应用时,不仅仅只是要考虑其功能是否足够完备,更重要的是要考虑如
何才能提高用户的体验满意度。这是理性的回归,也是Web开发技术发展的必然趋势,而jQuery恰恰是满足这一理性需求的坚实利刃。
   
虽然jQuery使用简单,但它毕竟是一门新的技术,与传统的JavaScript在性能与语法上存在诸多差异,需要相应的书籍来引导开发者们迅速而有效地掌握它,并能真正付诸实践。综观现在已经出版的中文类jQuery图书,不是简单的概念性介绍,就是缺乏真正的实践指导,而且版本相对陈旧。为了让所有
还没有完全掌握jQuery技术的开发者能迅速步入jQuery的殿堂,《jQuery权威指南
》诞生了,相信它不会让你失望。

本书特点

    与国内目前已经出版的同类书相比较,《jQuery权威指南
》具有以下几个独有的特点:
     基于jQuery的最新版本撰写,完美地展现了jQuery最新版本的功能和特性。
     内容全面、丰富、翔实,不仅由浅入深地讲解了jQuery的所有必备基础知识,还介绍了jQuery UI等扩展知识以及jQuery开发中的技巧与性能优化方面的高级知识。
    
本书极其注重实战,因为动手实践才是掌握一门新技术的最有效途径。不仅书中的每一个小知识点都配有精心选择的小案例(总共100多个),而且还有两个非常实用的综合性案例。所有案例的讲解都非常详细,不仅有功能需求分析和完整实现代码,而且还有最终效果的展示,更重要的是,将所有理论知识都巧妙地贯穿于其
中,非常易于读者理解。如果读者能在阅读本书的过程中逐一亲手实现这些案例,在实际开发中应该就具备相当的动手能力了。

本书面向的读者

    《jQuery权威指南
》适合所有希望迅速掌握jQuery并将之付诸实践的Web开发者阅读。

如何阅读本书

   
由于本书的结构是层进式的,章节之间有一定的关联,因此建议读者按章节的编排顺序逐章阅读。但在阅读本书的示例时,请尽量不要照抄书中的所有示例,而是重在理解代码的实现思路,自己动手开发相似功能的应用,并逐步完善其功能,这样才能真正领会示例所反映出的jQuery技术的理论本质。

联系作者

   
希望这部耗时数月、承载了我近4年jQuery开发心得和体会的拙著能给每一位阅读过它的读者带来技术上的提升和思路上的启发。非常希望能借本书出版的机
会与国内热衷于jQuery技术的开发者交流,如果大家想联系我,欢迎给我发邮件:tao_guo_rong@163.com。

致谢

    《jQuery权威指南
》能顺利出版,首先要感谢机械工业出版社华章分社的编辑们,尤其是杨福川编辑。正是由于他们在我写作的整个过程中不断地给予专业的指导,才使得我整体的创作思路不断被提升和改进,使本书能保质保量地完成。同时,我还要感谢我的家人,正是他们的理解与默默支持,才使得我能全心写作、顺利完成本书的编写。

陶国荣
2010年11月

 

AjaxPro的使用

1、下载AjaxPro组件。将AjaxPro.dll引用到网站(项目)。

2、修改web.config。在<system.web>中添加代码:

<configuration>
  
<system.web>
  
<httpHandlers>
  
<!--Register the ajax handler-->
  
<add verb = "*" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro"/>
  
</httpHandlers>
  
</system.web>
  
</configuration>

3、AjaxPro在页Page_Load事件中进行运行时注册。如:

 protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(AnjianApp.Test));//对AjaxPro在页Page_Load事件中进行运行时注册,这里的
            //AnjianApp.Test是指页面类的类名。如果放在命名空间,则写出完整的命名空间.类名,如本例。
        }

4、创建服务器端方法,只要给一个方法加上[AjaxPro.AjaxMethod]标记,该方法就可以变成一个AjaxPro可进行映射调用的方法。

#region 创建服务器端方法,只要给一个方法加上[AjaxPro.AjaxMethod]标记,该方法就可以变成一个AjaxPro可进行映射调用的方法
        [AjaxPro.AjaxMethod]
        public string getString(int a,int b)
        {
            //该方法实现从客户端传递两个参数,在服务器端相加后将结果返回给客户端
            return  Convert.ToString(a+b);
        }
        #endregion

5、客户端调用

    <script type=”text/javascript”>
        function getString() {
            AnjianApp.Test.getString(1, 2, getString_callBack); //调用服务器端的getString方法,同时指定回调函数getString_callBack
            //来接受从服务器端传过来的数据
        }
        //回调函数,用于接受从服务器端传过来的数据
        function getString_callBack(result) {
            var test = result.value;
            alert(test);
        }
    </script>

完整的页Page_Load事件代码为:

1 using System; 2 using System.Collections.Generic; 3 using System.Web; 4 using System.Web.UI; 5 using System.Web.UI.WebControls; 6 using AjaxPro; 7 8 namespace AnjianApp 9 { 10 public partial class Test : System.Web.UI.Page 11 { 12 protected void Page_Load(object sender, EventArgs e) 13 { 14 AjaxPro.Utility.RegisterTypeForAjax(typeof(AnjianApp.Test));//对AjaxPro在页Page_Load事件中进行运行时注册,这里的 15 //AnjianApp.Test是指页面类的类名。如果放在命名空间,则写出完整的命名空间.类名,如本例。 16 } 17 #region 创建服务器端方法,只要给一个方法加上[AjaxPro.AjaxMethod]标记,该方法就可以变成一个AjaxPro可进行映射调用的方法 18 [AjaxPro.AjaxMethod] 19 public string getString(int a,int b) 20 { 21 //该方法实现从客户端传递两个参数,在服务器端相加后将结果返回给客户端 22 return Convert.ToString(a+b); 23 } 24 #endregion 25 } 26 }

到此完成了一个完整的AjaxPro的使用了。

****************************************************************华丽的分割线*********************************************************************************

Ajax.net有AjaxPro.dll和Ajax.dll两个版本。两个版本差不多。主要区别是:

(1)Web.config不一样。

Ajax.dll为:

<add verb = “GET,POST” path=”ajax/*.ashx” type=”Ajax.PageHandlerFactory,Ajax”/>

AjaxPro.dll为:

<add verb = “*” path=”ajaxpro/*.ashx” type=”AjaxPro.AjaxHandlerFactory,AjaxPro”/>

(2)调用服务器方法不一样。如果发现命名空间找不到或者对象未定义引用Ajax.dll时,调用服务器方法不要加命名空间,应用AjaxPro.dll时,调用服务器方法需要加命名空间。

例如:<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Test.aspx.cs” Inherits=”AnjianApp.Test” %>

客户端调用方式:

Ajax.dll为:function getString() {
            Test.getString(1, 2, getString_callBack);         }

AjaxPro.dll为:function getString() {
            AnjianApp.Test.getString(1, 2, getString_callBack); 

        }

jqueryui最近怎么了?

    由于喜欢jquery,所以对jquery ui也格外关注,但是最近发生的一些事情却很令人迷惑。
jquery的官方网站前不久有一次风格的改版,改版前jquery ui有一个1.6b的版本,比较之前的1.5.2的版本有一些性能的提高,也增加了一些特效。但是改版后的官方网站这个下载版本没有了,又恢复到了1.5.2的版本。今天发现他的官方网站又增加了一个1.6rc1版本,下载下来一试,感觉就是倒退,datepicker面目全非,虽然不是稳定版,也不至于做到这步田地,jquery ui 最近怎么了?

jQueryMiniUI快速入门:表单开发(四)

表单开发包括:布局、验证、加载、提交、清除、重置等。

效果图如下:

表单布局

使用HTML Table标签实现任意丰富的表单布局:

<table class=”form-table” border=”0″ cellpadding=”1″ cellspacing=”2″>

    <tr>

        <td class=”form-label” style=”width:60px;”>姓名:</td>

        <td style=”width:150px”>

            <input name=”name” class=”mini-textbox” />

        </td>

        <td class=”form-label” style=”width:60px;”>地址:</td>

        <td style=”width:150px”>

            <input name=”addr” class=”mini-textbox” />

        </td>

    </tr>

    <tr>

        <td class=”form-label”>性别:</td>

        <td >

            <input name=”gender” class=”mini-radiobuttonlist” data=”[{id: 1, text: ‘男’}, {id: 2, text: ‘女’}]”/>

        </td>

        <td class=”form-label”>年龄:</td>

        <td >

            <input name=”age” class=”mini-spinner” />

        </td>

    </tr>

    <tr>

        <td class=”form-label”>备注:</td>

        <td colspan=”3″ >

            <input name=”remarks” class=”mini-textarea” style=”width:343px;height:60px;”/>

        </td>       

    </tr>

</table>

数据验证

监听处理控件的”validation”事件,自定义验证规则和错误描述信息:

<input id=”username” name=”username”

    onvalidation=”onUserNameValidation” class=”mini-textbox” required=”true” />

function onUserNameValidation(e) {

    if (e.isValid) {

        if (isEmail(e.value) == false) {

            e.errorText = “必须输入邮件地址”;

            e.isValid = false;

        }

    }

}

使用mini.Form组件对多个控件进行验证:

var form = new mini.Form(“#form1”);

form.validate();

加载表单

$.ajax({

    url: “../data/FormService.aspx method=LoadData”,

    type: “post”,

    success: function (text) {

        var data = mini.decode(text);   //反序列化成对象

        form.setData(data);             //设置多个控件数据

    }

});

提交表单

//提交表单数据

var form = new mini.Form(“#form1”);           

var data = form.getData();      //获取表单多个控件的数据

var json = mini.encode(data);   //序列化成JSON

$.ajax({

    url: “../data/FormService.aspx method=SaveData”,

    type: “post”,

    data: { submitData: json },

    success: function (text) {

        alert(“提交成功,返回结果:” + text);

    }

});

清除表单

form.clear();

重置表单

form.reset();

参考示例:

    表单布局

    表单控件

    弹出面板:本页面

    弹出面板:子页面

    编辑表单:行内编辑

    验证规则

    表单:验证

    表单:文本显示

    表单:组合验证

    表单:弹出框验证

jQueryMiniUI开发教程CRUD之:单元格编辑(一)

CRUD之:单元格编辑



参考示例:单元格编辑

一:创建单元格编辑器

<div id=”datagrid1″ class=”mini-datagrid” style=”width:800px;height:280px;”

    url=”../data/AjaxService.aspx method=SearchEmployees” idField=”id”

    allowResize=”true” pageSize=”20″

    allowCellEdit=”true” allowCellSelect=”true” multiSelect=”true”>

    <div property=”columns”>

        <div type=”checkcolumn”></div>           

        <div field=”loginname” width=”120″ headerAlign=”center” allowSort=”true”>员工帐号

            <input property=”editor” class=”mini-textbox” style=”width:100%;”/>

        </div>               

        <div field=”gender” width=”100″ renderer=”onGenderRenderer” align=”center” headerAlign=”center”>性别

            <input property=”editor” class=”mini-combobox” style=”width:100%;” data=”Genders”/>               

        </div>

        <div field=”age” width=”100″ allowSort=”true” >年龄

            <input property=”editor” class=”mini-spinner” minValue=”0″ maxValue=”200″ value=”25″ style=”width:100%;”/>

        </div>

        <div field=”birthday” width=”100″ allowSort=”true” dateFormat=”yyyy-MM-dd”>出生日期

            <input property=”editor” class=”mini-datepicker” style=”width:100%;”/>

        </div>   

        <div field=”remarks” width=”120″ headerAlign=”center” allowSort=”true”>备注

            <input property=”editor” class=”mini-textarea” style=”width:100%;” minHeight=”80″/>

        </div>                                

        <div field=”createtime” width=”100″ headerAlign=”center” dateFormat=”yyyy-MM-dd” allowSort=”true”>创建日期</div>

    </div>

</div>

设置allowCellEdit和allowCellSelect后,表格为单元格编辑模式。

二:编辑操作

增加行:

function addRow() {

    var newRow = { name: “New Row” };

    grid.addRow(newRow, 0);

}

删除行:

function removeRow() {

    var rows = grid.getSelecteds();

    if (rows.length > 0) {

        grid.removeRows(rows, true);

    }

}

保存数据:

function saveData() {

    //获得增加、删除、修改的记录集合

    var data = grid.getChanges();

    var json = mini.encode(data);

    grid.loading(“保存中,请稍后……”);       

    $.ajax({

        url: “../data/AjaxService.aspx method=SaveChangedEmployees”,

        data: { data: json },

        type: “post”,

        success: function (text) {

            grid.reload();

        },

        error: function (jqXHR, textStatus, errorThrown) {

            alert(jqXHR.responseText);

        }

    });

}

三:服务端处理

public void SaveChangedEmployees()

{

    String json = Request[“data”];

    ArrayList rows = (ArrayList)PluSoft.Utils.JSON.Decode(json);

    foreach (Hashtable row in rows)

    {

        //根据记录状态,进行不同的增加、删除、修改操作

        String state = row[“_state”] != null   row[“_state”].ToString() : “”;

        if(state == “added”)

        {

            row[“createtime”] = DateTime.Now;

            new TestDB().InsertEmployee(row);

        }

        else if (state == “removed” || state == “deleted”)

        {

            String id = row[“id”].ToString();

            new TestDB().DeleteEmployee(id);

        }

        else if (state == “modified”)

        {

            new TestDB().UpdateEmployee(row);

        }

    }

}

jqueryuidialog属性说明

 

1 属性

1.11 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候,一开始隐藏窗口,知道.dialog(“open”)的时候才弹出dialog窗口。默认为:true。

1.12 初始化例:请注意,$(‘.selector’)是dialog 的类名,在本例中.selector=#dialoag,以后不再说明。

$(‘.selector’).dialog({ autoOpen: false });

1.13 初始化后,得到和设置此属性例:

//获得

var autoOpen = $(‘.selector’).dialog(‘option’, ‘autoOpen’);

//设置

$(‘.selector’).dialog(‘option’, ‘autoOpen’, false);

 

1.21 bgiframe 默认为false ,When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.

在IE6下,让后面那个灰屏盖住select。

1.22 初始化例:

$(‘.selector’).dialog({ bgiframe: true });

1.23 初始化后,得到和设置:

//获取

var bgiframe = $(‘.selector’).dialog(‘option’, ‘bgiframe’);

//设置

$(‘.selector’).dialog(‘option’, ‘bgiframe’, true);

 

1.31 buttons 显示一个按钮,并写上按钮的文本,设置按钮点击函数。默认为{},没有按钮。

最上面的例子中已经有buttons属性的用法,请注意。

1.32 初始化例:

$(‘.selector’).dialog({ buttons: { “Ok”: function() { $(this).dialog(“close”); } } });

1.33 初始化后,得到和设置:

//获取

var buttons = $(‘.selector’).dialog(‘option’, ‘buttons’);

//设置

$(‘.selector’).dialog(‘option’, ‘buttons’, { “Ok”: function() { $(this).dialog(“close”); } });

 

1.41 closeOnEscape 为true的时候,点击键盘ESC键关闭dialog,默认为true;

1.42 初始化例:

$(‘.selector’).dialog({ closeOnEscape: false });

1.43 初始化后,得到和设置:

//获取

var closeOnEscape = $(‘.selector’).dialog(‘option’, ‘closeOnEscape’);

//设置

$(‘.selector’).dialog(‘option’, ‘closeOnEscape’, false);

 

1.51 dialogClass 类型将被添加到dialog,默认为空

1.52 初始化例:

$(‘.selector’).dialog({ dialogClass: ‘alert’ });

1.53 初始化后,得到和设置:

//获取

var dialogClass = $(‘.selector’).dialog(‘option’, ‘dialogClass’);

//设置

$(‘.selector’).dialog(‘option’, ‘dialogClass’, ‘alert’);

 

1.61 draggable、resizable : draggable是否可以使用标题头进行拖动,默认为true,可以拖动;resizable是否可以改变dialog的大小,默认为true,可以改变大小。

1.62 初始化例:

$(‘.selector’).dialog({ draggable: false,resizable:false });

1.63 初始化后,得到和设置:

//获取

var draggable = $(‘.selector’).dialog(‘option’, ‘draggable’);

//设置

$(‘.selector’).dialog(‘option’, ‘draggable’, false);

 

1.71 width、height ,dialog的宽和高,默认为auto,自动。

1.72 初始化例:

$(‘.selector’).dialog({ height: 530,width:200 });

1.73 初始化后,得到和设置:请参考1.63

 

1.81 maxWidth、maxHeight、minWidth、minHeight ,dialog可改变的最大宽度、最大高度、最小宽度、最小高度。maxWidth、maxHeight的默认为false,为不限。minWidth、minHeight的默认为150。要使用这些属性需要ui.resizable.js 的支持。

1.82 初始化例:

$(‘.selector’).dialog({ maxHeight: 400,maxWidth:600,minHeight:300,minWidth:300 });

1.83 初始化后,得到和设置:请参考1.63

 

1.91 hide、show ,当dialog关闭和打开时候的效果。默认为null,无效果

1.92 初始化例:最上面的实例中用到,请自己看吧。

1.93 初始化后,得到和设置:请参考1.63

 

1.101 modal,是否使用模式窗口,模式窗口打开后,页面其他元素将不能点击,直到关闭模式窗口。默认为false不是模式窗口。

1.102 初始化例:$(‘.selector’).dialog({ modal: true });

1.103 初始化后,得到和设置:请参考1.63

 

1.111 title,dialog的标题文字,默认为空。

1.112 初始化例:见最上面的实例。1.113 初始化后,得到和设置:请参考1.63

 

1.121 position ,dialog的显示位置:可以是’center’, ‘left’, ‘right’, ‘top’, ‘bottom’,也可以是top和left的偏移量也可以是一个字符串数组例如[‘right’,’top’]。

1.122 初始化例:$(‘.selector’).dialog({ position: [‘top’,’right’] }); 1.123 初始化后,得到和设置:请参考1.63

 

1.131 zIndex, dialog的zindex值,默认值为1000.

1.132 初始化例:$(‘.selector’).dialog({ zIndex: 3999 }); 1.133 初始化后,得到和设置:请参考1.63

 

1.141 stack 默认值为true,当dialog获得焦点是,dialog将在最上面。

1.142 初始化例:$(‘.selector’).dialog({ stack: false }); 1.143 初始化后,得到和设置:请参考1.63

 

2 事件 

2.11 beforeclose 类型dialogbeforeclose , 当dialog尝试关闭的时候此事件将被触发,如果返回false,那么关闭将被阻止。

2.12 初始化例:$(‘.selector’).dialog({

   beforeclose: function(event, ui) { … }

});

2.13 使用类型绑定此事件例:$(‘.selector’).bind(‘dialogbeforeclose’, function(event, ui) {

});

 

2.21 close 类型:dialogclose ,当dialog被关闭后触发此事件。

2.22 初始化例:$(‘.selector’).dialog({

   close: function(event, ui) { … }

});

2.23 使用类型绑定此事件例:$(‘.selector’).bind(‘dialogclose’, function(event, ui) {

});

 

2.3 open 类型:dialogopen ,当dialog打开时触发。(篇幅有限,该省略的就省略了啊,初始化例和使用类型绑定事件可以向上参考。)

2.4 focus 类型:dialogfocus ,当dialog获得焦点时触发。

2.5 dragStart 类型:dragStart,当dialog拖动开始时触发。

2.6 drag 类型:drag ,当dialog被拖动时触发。

2.7 dragStop 类型:dragStop ,当dialog拖动完成时触发。

2.8 resizeStart 类型:resizeStart ,当dialog开始改变窗体大小时触发。

2.9 resize 类型:resize,当dialog被改变大小时触发。

2.10 resizeStop 类型:resizeStop,当改变完大小时触发。

 

3 方法

3.1 destroy ,我喜欢这个哦,摧毁地球。。。 例:.dialog( ‘destroy’ ) 

3.2 disable,dialog不可用,例:.dialog(‘disable’);

3.3 enable,dialog可用,例,如3.2

3.4 close,open,关闭、打开dialog

3.5 option ,设置和获取dialog属性,例如:.dialog( ‘option’ , optionName , [value] ) ,如果没有value,将是获取。

3.6 isOpen ,如果dialog打开则返回true,例如:.dialog(‘isOpen’)

3.7 moveToTop ,将dialog移到最上层,例如:.dialog( ‘moveToTop’ )

 

 

转载于:

http://www.cnblogs.com/bestfc/archive/2009/06/08/1498742.html