珂珂的个人博客 - 一个程序猿的个人网站

flexigrid实例用法

本网站的后台文章列表页面,应该比较完整的一个flexigrid例子.

先来看下aspx页面,其中的母版页就不贴出来了

isShowAjaxErrorMsg,isAlertAjaxErrorMsg 这2个是自己方便调试加的,可以不用管

详细',label:'fff', name : '\"logID\"',edittype:'button', width : 50, sortable : false, align: 'center'}													
                ],
                buttons: [
			{ name: 'add', displayname: '新增', bclass: 'add', onpress: toolbarItem },
            { name: 'modify', displayname: '修改', bclass: 'modify', onpress: toolbarItem },
             { name: 'show', displayname: '显示', bclass: 'show', onpress: toolbarItem },
            { name: 'hide', displayname: '隐藏', bclass: 'hide', onpress: toolbarItem },
            { name: 'top', displayname: '置顶', bclass: 'top', onpress: toolbarItem },
            { name: 'down', displayname: '取消置顶', bclass: 'down', onpress: toolbarItem },
            { name: 'del', displayname: '删除', bclass: 'delete', onpress: toolbarItem }
                ],
                searchitems: [
			{ display: 'ID', name: 'articID', isdefault: true },
            { display: '标题', name: 'articTitle', isdefault: false }
                ],
                width: "auto",
                sortname: "ROWDATE",
                sortorder: "desc",
                //qop: "LIKE",//搜索的操作符
                usepager: true,
                title: '文章列表',
                useRp: true,
                rp: 10,
                rpOptions: [5, 10, 15, 20, 30, 40, 100], //可选择设定的每页结果数
                autoload: true, //自动加载,即第一次发起ajax请求
                resizable: true, //table是否可伸缩
                pagestat: '显示 {from} 到 {to}, 共 {total} 条',
                procmsg: '请等待数据正在加载中 …',
                nomsg: '没有数据',
                onSuccess: fixCheckbox,
                showcheckbox: true,
                isShowAjaxErrorMsg: true,
                isAlertAjaxErrorMsg: true,
                //  onError: '查询出错,请刷新'
                errormsg: '发生异常'  //jquery.flexigrid.js 中的
                // gridClass: "bbit-grid", //样式
            });

            function toolbarItem(com, grid) {
                if (com == 'del') {
                    deleteMe();
                } else if (com == 'add') {
                    openDialogAdd();
                } else if (com == 'modify') {
                    openDialogModify();
                }
                else if (com == 'show') {
                    doAction("articIsHidden", "0");
                }
                else if (com == 'hide') {
                    doAction("articIsHidden", "1");
                }
                else if (com == 'top') {
                    doAction("articIsTop", "1");
                }
                else if (com == 'down') {
                    doAction("articIsTop", "0");
                }
            }

            function formatMoney(value, pid) {
                return "¥" + parseFloat(value).toFixed(2);
            }

            function formatImage(value, pid) {
                if (value == null || value == "" || value == " ") {
                    return "";
                }
                else {
                    return "";
                }
            }

            function formatLineHeight(value, pid) {
                return "" + value + "";
            }

            function openDialogAdd() {
                document.location.href = "ArticleEdit.aspx";
            }
            function openDialogModify() {
                if ($(".trSelected", grid).length == 1) {
                    var id = $('.trSelected td:nth-child(2)', grid).text();
                    window.open("ArticleEdit.aspx?id=" + id);
                } else if ($(".trSelected", grid).length > 1) {
                    alert("请选择一个修改,不能同时修改多个记录!");
                } else if ($(".trSelected", grid).length == 0) {
                    alert("请选择一个您要修改的记录!");
                }
            }

            function doAction(fieldName, state) {
                if ($('.trSelected', grid).length == 0) {
                    alert("请选择要操作的数据!");
                } else {
                    var ids = "";
                    $('.trSelected td:nth-child(2)', grid).each(function () {
                        ids += "," + $(this).text();
                    });
                    ids = ids.substring(1);
                    $.ajax({
                        type: "POST",
                        url: "ArticleList.aspx?action=changeState&state=" + state + "&fieldName=" + fieldName,
                        data: "ids=" + ids,
                        dataType: "text",
                        success: function (msg) {
                            if (msg == "success") {
                                jBox.tip(' 操作成功。', 'success');
                                $("#flexTable").flexReload();
                            } else {
                                jBox.tip('操作失败。', 'error');
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert("错误");
                            document.write(XMLHttpRequest.responseText);

                        }
                    });
                }
            }

            function deleteMe() {
                if ($('.trSelected', grid).length == 0) {
                    alert("请选择要删除的数据!");
                } else {
                    if (confirm('是否删除这 ' + $('.trSelected', grid).length + ' 条记录吗?')) {
                        var ids = "";
                        $('.trSelected td:nth-child(2)', grid).each(function () {
                            ids += "," + $(this).text();
                        });
                        ids = ids.substring(1);
                        $.ajax({
                            type: "POST",
                            url: "ArticleList.aspx?action=delete",
                            data: "ids=" + ids,
                            dataType: "text",
                            success: function (msg) {
                                if (msg == "success") {
                                    jBox.tip('删除成功。', 'success');
                                    //$('.trSelected', grid).each(function () {
                                    //    $(this).hide();
                                    //});
                                    $("#flexTable").flexReload();
                                } else {
                                    jBox.tip("删除失败!" + msg, 'error');
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                jBox.tip("错误", 'error');
                                document.write(XMLHttpRequest.responseText);

                            }
                        });
                    }
                }
            }

            $("#btnCateChange").click(function () {
                doAction("cateID", $("#").val());
            });

            $("#btnTopicChange").click(function () {
                doAction("topicID", $("#").val());
            });

            $("#btnTrue").click(function () {
                doAction("" + $("#").val() + "", '1');
            });
            $("#btnFalse").click(function () {
                doAction($("#").val(), '0');
            });

            //修正第一列的复选框
            function fixCheckbox() {
                $('td:nth-child(1)', grid).each(function () {
                    $(this).find("input").css("margin-top", "25px");
                });
            }
        })" _ue_custom_node_="true"> 查询分类: 是否原创: 改变分类: 改变主题: 改变:

 


上一篇:jUploader上传

下一篇:个人代码全部开源


0 评论

查看所有评论

给个评论吧