JQuery EasyUi之界面设计——通用的JavaScript（二）

所谓磨刀不误砍柴工，先写点通用的代码，后面开发起来效率就高多了。多余的话就不敲了，先简单介绍介绍吧。

---

时间格式化

对于序列化JSON，我喜欢用JSON.NET，为了方便，我定义了一个扩展方法，如下面代码：

   1:          /// <summary>

   2:          /// 将对象序列化为JSON数据

   3:          /// </summary>

   4:          /// <param name="instance"></param>

   5:          /// <returns></returns>

   6:          public static string ToJson(this object instance)

   7:          {

   8:              return JsonConvert.SerializeObject(instance);

   9:          }

那么序列化JOSN输出那么就方便多了，如下面代码：

                                    var info = from a in db.TB_KTVAndConcert
                                               join b in db.TB_City on a.Cityid equals b.ID
                                               where a.AttributeCode == "AttrubuteCode".GetRequest()
                                               orderby a.Cityid
                                               select new
                                               {
                                                   a.CreateDate,
                                                   a.Defaultflag,
                                                   a.ID,
                                                   a.Name,
                                                   a.Cityid,
                                                   b.CityName,
                                                   a.Displayindex
                                               };
                                    if ("CityID".GetRequest().IsNotEmpty())
                                    {
                                        if (MyRegex.IsNumberRegex("CityID".GetRequest()))
                                        {
                                            int cityId = Convert.ToInt32("CityID".GetRequest());
                                            info = info.Where(p => p.Cityid == cityId);
                                        }
                                    }
                                    context.Response.Write(info.OrderByDescending(p => p.Defaultflag).ThenBy(p => p.Displayindex).ToJson());

序列化JSON是可以了，但是前台显示DateTime类型数据时显示就有问题了，也就是获取不到想要的格式化字符串。解决这个问题有两种方式，方式一就是定义一个C#方法来返回格式化时间字符串，关键部分代码如下：

                                               select new
                                               {
                                                   CreateDate = a.CreateDate.GetDateTimeString(),
                                                   a.Defaultflag,
                                                   a.ID,
                                                   a.Name,
                                                   a.Cityid,
                                                   b.CityName,
                                                   a.Displayindex
                                               };

这样虽然可以，但是如果我想统一在浏览器端处理呢？于是封装下面的函数：

//时间格式化
Date.prototype.format = function (format) {
    if (!format) {
        format = "yyyy-MM-dd hh:mm:ss";
    }
    var o = {
        "M+": this.getMonth() + 1, // month
        "d+": this.getDate(), // day
        "h+": this.getHours(), // hour
        "m+": this.getMinutes(), // minute
        "s+": this.getSeconds(), // second
        "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
        "S": this.getMilliseconds()
        // millisecond
    };
    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
        }
    }
    return format;
};
function fomatDate(str) {
    return (new Date(parseInt(str.substring(str.indexOf('(') + 1, str.indexOf(')'))))).format("yyyy-MM-dd hh:mm:ss");
}

  前台调用：

        function formatCreateDate(value, row, index) {

            return fomatDate(row.CreateDate);

        }

显示效果：

---

消息框

弹出框以及系统消息框

function showMsg(title, msg, isAlert) {
    if (isAlert !== undefined && isAlert) {
        $.messager.alert(title, msg);
    } else {
        $.messager.show({
            title: title,
            msg: msg,
            showType: 'show'
        });
    }
}

 

确认框

   1:  function showConfirm(title, msg, callback) {

   2:      $.messager.confirm(title, msg, function (r) {

   3:          if (r) {

   4:              if (jQuery.isFunction(callback))

   5:                  callback.call();

   6:          }

   7:      });

   8:  }

进度框

function showProcess(isShow, title, msg) {
    if (!isShow) {
        $.messager.progress('close');
        return;
    }
    var win = $.messager.progress({
        title: title,
        msg: msg
    });
}

例如在表单提交时，为了防止重复提交，会显示一个进度框。提交完成时，关闭进度框并提示操作信息：

   1:  function submitForm(url) {

   2:      $('#ff').form('submit', {

   3:          url: (url === undefined ? "/Ajax/Common.ashx" : url) + "?Type=" + typeCode,

   4:          onSubmit: function () {

   5:              var flag = $(this).form('validate');

   6:              if (flag) {

   7:                  showProcess(true, '温馨提示', '正在提交数据...');

   8:              }

   9:              return flag

  10:          },

  11:          success: function (data) {

  12:              showProcess(false);

  13:              if (data == 1) {

  14:                  top.showMsg('温馨提示', '提交成功！');

  15:                  if (parent !== undefined) {

  16:                      if ($.isFunction(window.reloadParent)) {

  17:                          reloadParent.call();

  18:                      } else {

  19:                          parent.$("#tt").datagrid('reload');

  20:                          parent.closeMyWindow();

  21:                      }

  22:                  }

  23:              } else {

  24:                  $.messager.alert('温馨提示', data);

  25:              }

  26:          },

  27:          onLoadError: function () {

  28:              showProcess(false);

  29:              $.messager.alert('温馨提示', '由于网络或服务器太忙，提交失败，请重试！');

  30:          }

  31:      });

  32:  }

关键页面代码如下：

    <div class="easyui-layout" style="text-align: left; height: 270px;" fit="true">

        <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">

            <form id="ff" method="post">

            <input type="hidden" name="id" value="" />

            <table border="0" cellpadding="0" cellspacing="0">

                <tr>

                    <td>

                        <label for="AdminLogin">

                            登录名：</label>

                    </td>

                    <td>

                        <input class="easyui-validatebox" style=" 300px;" type="text" required="true"

                            validtype="length[0,20]" name="AdminLogin"></input>

                    </td>

                </tr>

                <tr>

                    <td>

                        <label for="RoleID">

                            所属角色：</label>

                    </td>

                    <td>

                        <input class="easyui-combobox" valuefield="ID" textfield="RoleName" panelheight="auto"

                            editable="false" style=" 300px;" url="/Ajax/Common.ashx?Type=GetRoles"

                            required="true" name="RoleID"></input>

                    </td>

                </tr>

                <tr>

                    <td colspan="2" style='color: Red'>

                        在编辑时，输入管理员密码表示重新设置密码。

                    </td>

                </tr>

                <tr>

                    <td>

                        <label for="AdminPassword">

                            密码：</label>

                    </td>

                    <td>

                        <input class="easyui-validatebox" style=" 300px;" type="text" validtype="length[6,20]"

                            id='txtPassword' name="AdminPassword"></input>

                    </td>

                </tr>

                <tr>

                    <td>

                        <label for="AdminPassword2">

                            确认密码：</label>

                    </td>

                    <td>

                        <input class="easyui-validatebox" style=" 300px;" type="text" validtype="length[6,20]"

                            id='txtPassword2' name="AdminPassword2"></input>

                    </td>

                </tr>

                <tr>

                    <td>

                        <label for="Defatulflag">

                            是否上架：</label>

                    </td>

                    <td>

                        <input type="checkbox" name="Defatulflag" class="easyui-validatebox" type="text"

                            required="true" value="1" />

                    </td>

                </tr>

            </table>

            </form>

        </div>

        <div region="south" border="false" style="text-align: right; padding: 5px 5px 5px 0;">

            <a class="easyui-linkbutton" iconcls="icon-save" href="javascript:void(0)" onclick="javascript:submitForm();">

                提交</a>

        </div>

    </div>

    <script type="text/javascript">

        $(function () {

            if (autoLoad == 1) {

                $('#txtPassword').keypress(function () {

                    if ($(this).val().length > 0) {

                        $('#txtPassword2').validatebox({

                            required: true

                        });

                    }

                }).change(function () {

                    if ($(this).val().length > 0) {

                        $('#txtPassword2').validatebox({

                            required: true

                        });

                    } else {

                        $('#txtPassword2').validatebox({

                            required: false

                        });

                    }

                });



            } else {

                $('#txtPassword,#txtPassword2').validatebox({

                    required: true

                }); ;

            }

        });

    </script>

 

效果如下：

---

窗口

窗口是用的非常频繁的，显示窗口：

$(function () {
    $('body').append('<div id="myWindow" class="easyui-dialog" closed="true"></div>');
});
function showMyWindow(title, href, width, height, modal, minimizable, maximizable) {
    $('#myWindow').window({
        title: title,
         width === undefined ? 600 : width,
        height: height === undefined ? 400 : height,
        content: '<iframe scrolling="yes" frameborder="0"  src="' + href + '" ></iframe>',
        //        href: href === undefined ? null : href,
        modal: modal === undefined ? true : modal,
        minimizable: minimizable === undefined ? false : minimizable,
        maximizable: maximizable === undefined ? false : maximizable,
        shadow: false,
        cache: false,
        closed: false,
        collapsible: false,
        resizable: false,
        loadingMessage: '正在加载数据，请稍等片刻......'
    });
}

关闭窗口：

function closeMyWindow() {
    $('#myWindow').window('close');
}
使用方式如下：
        function onDataGridDblClickRow(rowIndex, rowData) {

            edit();

        }

        function addType() {

            showMyWindow('用户管理 | 新建', '/WebPages/RoleManagement/AdminUser_Add.aspx', 600, 320)

        }

        function edit() {

            var row = $('#tt').datagrid('getSelected');

            if (row) {

                showMyWindow('用户管理 | 编辑', '/WebPages/RoleManagement/AdminUser_Add.aspx?ID=' + row.ID + '&autoLoad=1', 600, 320)

            } else {

                showMsg("温馨提示", "请选择一行！");

            }

        }
窗口弹出有本页弹出，有时由于框架页太小，经常会使用顶层窗口弹出，如：
        function showSetPicWindow(adname, id) {

            top.showMyWindow(adname + " | 广告图设置", '/WebPages/ADManagement/ADPicturesManagement.aspx?TypeCode=ADPictures&ID=' + id + '&ATCode=KTVAdvert', 707, 440);

        }

效果如下：

---

表单

一个系统总是不乏表单的，自然表单的提交与赋值自然是频繁的。如果使用C#，可以通过反射减少工作量，但是我更趋向把工作量留给前台。比如提交：

function submitForm(url) {
    $('#ff').form('submit', {
        url: (url === undefined ? "/Ajax/Common.ashx" : url) + "?Type=" + typeCode,
        onSubmit: function () {
            var flag = $(this).form('validate');
            if (flag) {
                showProcess(true, '温馨提示', '正在提交数据...');
            }
            return flag
        },
        success: function (data) {
            showProcess(false);
            if (data == 1) {
                top.showMsg('温馨提示', '提交成功！');
                if (parent !== undefined) {
                    if ($.isFunction(window.reloadParent)) {
                        reloadParent.call();
                    } else {
                        parent.$("#tt").datagrid('reload');
                        parent.closeMyWindow();
                    }
                }
            } else {
                $.messager.alert('温馨提示', data);
            }
        },
        onLoadError: function () {
            showProcess(false);
            $.messager.alert('温馨提示', '由于网络或服务器太忙，提交失败，请重试！');
        }
    });
}

值得说明的是：

1. typeCode来自母版页，为页面名。
2. url为提交的URL。
3. onSubmit事件会触发表单验证，如果验证通过会显示提交进度遮罩层。如果觉得不够用，可以自己扩展。
4. success事件会关闭进度，如果提交成功会显示成功提示，如果存在父窗口，会刷新父页面DataGrid并且关闭当前窗口。当然也可以实现reloadParent函数来个性化处理。
5. 表单id和DataGrid的id都是固定的，如果没有效果请检查id。
6. 关于表单的这里只写了提交，赋值的代码写在母版页了，以后再说。

页面html的提交代码如下：

   1:  <a class="easyui-linkbutton" iconcls="icon-save" href="javascript:void(0)" onclick="javascript:submitForm('/Ajax/ShortMMS_Common.ashx');">

   2:                  提交</a>

 

有些页面可能刷新DataGrid还不够，需要刷新页面，于是可以使用下面的JS：

    <script type="text/javascript">
        function reloadParent() {
            top.showProcess(false);
            parent.showMsg('温馨提示', '提交成功');
            parent.document.location.reload();
        }
    </script>

最后，附上完整的JS代码：

//时间格式化
Date.prototype.format = function (format) {
    if (!format) {
        format = "yyyy-MM-dd hh:mm:ss";
    }
    var o = {
        "M+": this.getMonth() + 1, // month
        "d+": this.getDate(), // day
        "h+": this.getHours(), // hour
        "m+": this.getMinutes(), // minute
        "s+": this.getSeconds(), // second
        "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
        "S": this.getMilliseconds()
        // millisecond
    };
    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
        }
    }
    return format;
};
function fomatDate(str) {
    return (new Date(parseInt(str.substring(str.indexOf('(') + 1, str.indexOf(')'))))).format("yyyy-MM-dd hh:mm:ss");
}
function showMsg(title, msg, isAlert) {
    if (isAlert !== undefined && isAlert) {
        $.messager.alert(title, msg);
    } else {
        $.messager.show({
            title: title,
            msg: msg,
            showType: 'show'
        });
    }
}
$(function () {
    $('body').append('<div id="myWindow" class="easyui-dialog" closed="true"></div>');
});
function showMyWindow(title, href, width, height, modal, minimizable, maximizable) {
    $('#myWindow').window({
        title: title,
         width === undefined ? 600 : width,
        height: height === undefined ? 400 : height,
        content: '<iframe scrolling="yes" frameborder="0"  src="' + href + '" ></iframe>',
        //        href: href === undefined ? null : href,
        modal: modal === undefined ? true : modal,
        minimizable: minimizable === undefined ? false : minimizable,
        maximizable: maximizable === undefined ? false : maximizable,
        shadow: false,
        cache: false,
        closed: false,
        collapsible: false,
        resizable: false,
        loadingMessage: '正在加载数据，请稍等片刻......'
    });
}
function closeMyWindow() {
    $('#myWindow').window('close');
}
function submitForm(url) {
    $('#ff').form('submit', {
        url: (url === undefined ? "/Ajax/Common.ashx" : url) + "?Type=" + typeCode,
        onSubmit: function () {
            var flag = $(this).form('validate');
            if (flag) {
                showProcess(true, '温馨提示', '正在提交数据...');
            }
            return flag
        },
        success: function (data) {
            showProcess(false);
            if (data == 1) {
                top.showMsg('温馨提示', '提交成功！');
                if (parent !== undefined) {
                    if ($.isFunction(window.reloadParent)) {
                        reloadParent.call();
                    } else {
                        parent.$("#tt").datagrid('reload');
                        parent.closeMyWindow();
                    }
                }
            } else {
                $.messager.alert('温馨提示', data);
            }
        },
        onLoadError: function () {
            showProcess(false);
            $.messager.alert('温馨提示', '由于网络或服务器太忙，提交失败，请重试！');
        }
    });
}
function deleteConfirm() {
    return showConfirm('温馨提示', '确定要删除吗?');
}
function showConfirm(title, msg, callback) {
    $.messager.confirm(title, msg, function (r) {
        if (r) {
            if (jQuery.isFunction(callback))
                callback.call();
        }
    });
}
function showProcess(isShow, title, msg) {
    if (!isShow) {
        $.messager.progress('close');
        return;
    }
    var win = $.messager.progress({
        title: title,
        msg: msg
    });
}

 

这篇就写到这里吧。如有不足之处，还望大家补充。累了，就先写到这里了。

静听鸟语花香，漫赏云卷云舒。一花一世界，一树一菩提，一码一人生。

当前标签: Jquery EasyUi

 

JQuery EasyUi之界面设计——通用的JavaScript（二）

雪雁 2012-03-25 23:30 阅读:1263 评论:14

 

JQuery EasyUi之界面设计——前言与界面效果（一）

雪雁 2012-03-19 00:45 阅读:3453 评论:31