[转载]jQuery EasyUI MC3的应用实例

baacloud免费翻墙vpn注册使用

[转载]jQuery EasyUI MC3的应用实例 – wikstone – 博客园.

之前写过一个WebForm和JQuery EasyUI结合的实例,一个用户管理,主要是帮助大家怎样把WebForm及MVC和EasyUI结合起来做项目。这里只有简单实例及入门方法,下面就主要贴图及附源码供大家下载!

这里依然套用疯狂秀才的界面。代码有借鉴博客园一哥们,并进行了修改。

此部分代码可以参考之前WebForm

列表页面:

添加页面:

主要一个了自带控件没有直接使用客户端控件,随后整理全部使用EasyUI控件,表达你提交此处使用了JQuery form提交

下面附上通用js代码:

View Code

<script type="text/javascript">

    $(function () {
        InitGird();
        InitSearch();
    });

    //初始化表格
    function InitGird() {
        $('#tab_list').datagrid({
            title: '用户列表', //表格标题
            url: '@Url.Action("List","User")', //请求数据的页面
            sortName: 'ID', //排序字段
            idField: 'ID', //标识字段,主键
            iconCls: '', //标题左边的图标
            nowrap: false, //是否换行,True 就会把数据显示在一行里
            striped: true, //True 奇偶行使用不同背景色
            collapsible: false, //可折叠
            sortOrder: 'desc', //排序类型
            remoteSort: true, //定义是否从服务器给数据排序
            fit: true,
            fitColumns: true, //自适应
            frozenColumns: [[//冻结的列,不会随横向滚动轴移动
                    {field: 'cbx', checkbox: true },
                    { title: '账号', field: 'UserName', width: 150, sortable: true },
                    { title: '真实姓名', field: 'RealName', width: 150 }
                ]],
            columns: [[
                    { title: '所属角色', field: 'Role', formatter: function (value, rec, index) { return value == 0 ? '管理员' : '普通用户' }, width: 120 },
                    { title: '是否超级管理员', field: 'IsAdmin', formatter: function (value, rec, index) { return value == 0 ? '否' : '是' }, width: 100 },
                    { title: '邮箱地址', field: 'Email', width: 150 },
                    { title: '操作', field: 'ID', width: 80, formatter: function (value, rec) {
                        return '<a style="color:red" href="javascript:;" onclick="EditData(' + value + ');$(this).parent().click();return false;">修改</a>';
                    }

                    }
                ]],
            toolbar: "#toolbar",
            pagination: true, //是否开启分页
            pageNumber: 1,
            pageSize: 10,
            pageList: [10, 20, 30, 40, 50],
            rownumbers: true //行号
        });

    }

    //初始化搜索框
    function InitSearch() {
        $("#ipt_search").searchbox({
            width: 200,
            iconCls: 'icon-save',
            searcher: function (val, name) {
                $('#tab_list').datagrid('options').queryParams.search_type = name;
                $('#tab_list').datagrid('options').queryParams.search_value = val;
                $('#tab_list').datagrid('reload');
            },
            prompt: '请输入要查询的账号'
        });
    }

    //打开添加窗口
    function AddData() {
        var url_str = '@Url.Action("Create","User")';

        $('#Creat_Dialog').load(url_str, function () {
            $(this).dialog({
                title: '添加用户',
                modal: true,
                loadingMessage: '正在加载...',
                buttons: [{
                    text: '提交',
                    iconCls: 'icon-ok',
                    handler: function () {
                        $('#add_form').submit();
                    }
                }, {
                    text: '取消',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $('#Creat_Dialog').dialog('close');
                    }
                }

                ]
            });
        }).show();
    }

    //打开编辑窗口
    function EditData(id) {
        if (id != undefined) {
            var url = '@Url.Action("Edit","User")/' + id;

            $('#Edit_Dialog').load(url, function () {
                $(this).dialog({
                    title: '编辑用户',
                    modal: true,
                    loadingMessage: '正在加载...',
                    buttons: [{
                        text: '提交',
                        iconCls: 'icon-ok',
                        handler: function () {
                            $('#edit_form').submit();
                        }
                    }, {
                        text: '取消',
                        iconCls: 'icon-cancel',
                        handler: function () {
                            $('#Edit_Dialog').dialog('close');
                        }
                    }]
                });
            }).show();
        }
    }

    //添加AJAX提交
    function ajaxAdd() {
        $('#add_form').ajaxSubmit({
            url: '@Url.Action("Create","User")',
            beforeSubmit: function () {
              //  console.info($('#add_form').form('validate'));
                if ($('#add_form').form('validate') != true) {
                    return false;
                }
                if ($("#add_form").valid() != true) {
                    return false;
                }
                return true;
            },
            success: function (data) {
                if (data == true) {
                    $('#Creat_Dialog').dialog('close');
                    $('#tab_list').datagrid('reload');
                    $.messager.show({
                        title: '提示',
                        msg: '保存成功',
                        timeout: 2000,
                        showType: 'slide'
                    });
                } else {
                    $.messager.show({
                        title: '提示',
                        msg: '保存失败:' + data,
                        timeout: 0,
                        showType: 'slide'
                    });
                }
            }
        });

        return false;
    }
    //编辑AJAX提交
    function ajaxEdit() {
        $('#edit_form').ajaxSubmit({
            url: '@Url.Action("Edit","User")',
            beforeSubmit: function () {
                if ($('#edit_form').form('validate') != true) {
                    return false;
                }
                if ($("#edit_form").valid() != true) {
                    return false;
                }
                return true;
            },
            success: function (data) {
                if (data == true) {
                    $('#Edit_Dialog').dialog('close');
                    $('#tab_list').datagrid('reload');
                    $.messager.show({
                        title: '提示',
                        msg: '保存成功',
                        timeout: 2000,
                        showType: 'slide'
                    });
                } else {
                    $.messager.show({
                        title: '提示',
                        msg: '保存失败:' + data,
                        timeout: 0,
                        showType: 'slide'
                    });
                }
            }
        });

        return false;
    }

    //删除
    function DelData(id) {
        var selected = "";
        if (id <= 0) {
            $($('#tab_list').datagrid('getSelections')).each(function () {
                selected += this.ID + ",";
            });
            selected = selected.substr(0, selected.length - 1);
            if (selected == "") {
                $.messager.alert('提示', '请选择要删除的数据!', 'info');
                return;
            }
        }
        else {
            selected = id;
        }

        if (id != undefined) {
            $.messager.confirm('确认', '确定删除?', function (r) {
                if (r) {
                    var url = '@Url.Action("Delete","User")/' + selected;
                    $.post(url, function () {

                    }).success(function (data) {
                        var msgstr = "删除成功";
                        if (data != true) {
                            msgstr = "删除失败" + data;
                            $.messager.show({
                                title: '提示',
                                msg: msgstr,
                                timeout: 0,
                                showType: 'slide'
                            });
                        } else {
                            $('#tab_list').datagrid('reload');
                            selected = '';
                            $.messager.show({
                                title: '提示',
                                msg: msgstr,
                                timeout: 3000,
                                showType: 'slide'
                            });
                        }

                        $('#tab_list').datagrid('reload');
                    }).error(function () {
                        $.messager.alert('错误', '删除发生错误');
                    });

                }
            });
        }
    }

</script>

今天简单就到这里吧!QQ群:92257772 希望大家能够共同学习。

下载链接

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏