JQuery easy UI 通过updateRow 排序

1.开启排序属性：

sortOrder: 'desc',
sortable: true,
remoteSort: false,

 

 

$('#tt').datagrid({
                url: '@Url.Content("~/Controller/ActionMethod")',
                width: "90%",
                height: 400,
                fitColumns: true,
                nowrap: false,
                idField: 'UserID',
                //sortName: 'UserID',
                sortOrder: 'desc',
                sortable: true,
                remoteSort: false,
                pagination: true,
                pageNumber: 1,
                rownumbers:true,
                singleSelect: true,
                frozenColumns: [[{ field: 'radio', formatter: function (value, row, index) {
                    return '<input type="radio" name="rd_action" />';
                }
                }]],
                columns: [[
                    { field: 'UserID', title: 'UserID', width: 260, hidden: 'true' },
                    { field: 'LoginName', title: '@ViewBag.LoginName', width: 180, align: 'left', sortable:true,formatter: function (data) {
                        //return "<div class='hiddenFontGommom' style='text-align:left;'>" + data + "</div>";
                        var keyword = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val());
                        return GetNewData(data, keyword, '@Url.Action("HighlightText","Domain")');
                    }
                    },
                    { field: 'FirstName', title: '@ViewBag.FirstName', width: 120, align: 'left', sortable:true,formatter: function (data) {
                        //return "<div style='text-align:left;' title=" + data + ">" + data + "</div>";
                        var keyword = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val());
                        return GetNewData(data, keyword, '@Url.Action("HighlightText","Domain")');

                        //                        var keyword = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val());
                        //                        if (keyword == "") {
                        //                            return "<div style='text-align:left;' title=" + data + ">" + data + "</div>";
                        //                        }
                        //                        else {
                        //                            var returnData = "";
                        //                            $.ajax({
                        //                                type: "POST",
                        //                                url: '@Url.Content("~/Domain/HighlightText")' + "?inputText=" + data + "&searchWord=" + keyword,
                        //                                async: false,
                        //                                success: function (newdata) {
                        //                                    //重新赋值
                        //                                    returnData = newdata;
                        //                                },
                        //                                error: function () {
                        //                                    //不修改returnData值
                        //                                }
                        //                            });
                        //                            return "<div style='text-align:left;' title=" + data + ">" + returnData + "</div>";
                        //                        }
                    }
                    },
                    { field: 'LastName', title: '@ViewBag.LastName', width: 120, align: 'left',sortable:true, formatter: function (data) {
                        //return "<div style='text-align:left;' title=" + data + ">" + data + "</div>";
                        var keyword = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val());
                        return GetNewData(data, keyword, '@Url.Action("HighlightText","Domain")');
                    }
                    },
                    { field: 'Email', title: '@ViewBag.Email', width: 180, align: 'left', formatter: function (data) {
                        return "<div class='hiddenFontGommom' style='text-align:left;' title=" + data + ">" + data + "</div>";
                    }
                    },

2.用一个标签存储ID值

   <div class="classdetail_btn_box0101">
                               <input id="up" value="Up" type="button" class="btnResetGomom"/>
                               <input id="tempUserId" value="" style="display:none"/>
                          </div>
                     </div>
                     <div class="btnCenterBoxes">
                          <div class="classdetail_btn_box0101">
                               <input id="down" value="Down" type="button" class="btnResetGomom"/>
                          </div>
                     </div>

 

3.JS实现排序

$(function () {
        $("#up").click(function () {
            var row = $('#tt').datagrid('getSelected');
            var allRows = $('#tt').datagrid('getRows');
            var lastRow = allRows[allRows.length - 1];
            var lastRowId = allRows[allRows.length - 1].UserID;
            $("#tempUserId").val(lastRowId);
            if (row != null) {
                if ($("input[name=rd_action]", $("div.datagrid-view1 tr.datagrid-row-selected")).attr("checked") == "checked") {
                    var curRownumber = $("input[name=rd_action]", $("div.datagrid-view1 tr.datagrid-row-selected")).parent().parent().parent().attr("datagrid-row-index");
                    if (curRownumber == 0) {
                        alert("已是第一行了！");
                    }
                    else {
                        for (var i = 0; i < allRows.length; i++) {
                            if (i == 0) {
                                $("#tt").datagrid("updateRow", { index: allRows.length - 1, row: allRows[i] });
                            }
                            else if (i != allRows.length - 1) {
                                $("#tt").datagrid("updateRow", { index: i - 1, row: allRows[i] });
                            }
                        }
                        var rowsid = $("#tempUserId").val();
                        $.ajax({
                            url: '@Url.Action("FindUserById", "Domain")' + "?userId=" + $("#tempUserId").val(),
                            type: "POST",
                            async: false,
                            success: function (data) {
                                $("#tt").datagrid("updateRow", { index: allRows.length - 2, row: data.userModel });
                                if (parseInt(curRownumber) == 0) {
                                    $('#tt').datagrid('selectRecord', allRows[allRows.length - 1].UserID);
                                }
                                else {
                                    $('#tt').datagrid('selectRecord', allRows[parseInt(curRownumber) -1].UserID);
                                 }
                                $("input[name=rd_action]", $("div.datagrid-view1 tr.datagrid-row-selected")).attr("checked", "checked");
                            },
                            error: function (data) {
                                alert("error");
                            }
                        });
                    }
                }

            }
            else {
                alert(Language_Domain_AddDomain_SelectAdminWarning);
            }

        })



        $("#down").click(function () {
            var row = $('#tt').datagrid('getSelected');
            var allRows = $('#tt').datagrid('getRows');
            var lastRow = allRows[0];
            var lastRowId = allRows[0].UserID;
            $("#tempUserId").val(lastRowId);

            if (row != null) {
                if ($("input[name=rd_action]", $("div.datagrid-view1 tr.datagrid-row-selected")).attr("checked") == "checked") {
                    var curRownumber = $("input[name=rd_action]", $("div.datagrid-view1 tr.datagrid-row-selected")).parent().parent().parent().attr("datagrid-row-index");
                    if (curRownumber == allRows.length - 1) {
                        alert("已是最后一行了！");
                    }
                    else {
                        for (var i = allRows.length - 1; i >= 0; i--) {
                            if (i == allRows.length - 1) {
                                $("#tt").datagrid("updateRow", { index: 0, row: allRows[i] });
                            }
                            else {
                                $("#tt").datagrid("updateRow", { index: i + 1, row: allRows[i] });
                            }
                        }
                        var rowsid = $("#tempUserId").val();
                        $.ajax({
                            url: '@Url.Action("FindUserById", "Domain")' + "?userId=" + $("#tempUserId").val(),
                            type: "POST",
                            async: false,
                            success: function (data) {
                                $("#tt").datagrid("updateRow", { index: 1, row: data.userModel });
                                if (parseInt(curRownumber) == allRows.length - 1) {
                                    $('#tt').datagrid('selectRecord', allRows[0].UserID);
                                }
                                else {
                                    $('#tt').datagrid('selectRecord', allRows[parseInt(curRownumber) + 1].UserID);
                                }
                                $("input[name=rd_action]", $("div.datagrid-view1 tr.datagrid-row-selected")).attr("checked", "checked");
                            },
                            error: function (data) {
                                alert("error");
                            }
                        });
                    }
                }
            }
            else {
                alert(Language_Domain_AddDomain_SelectAdminWarning);
            }

        })

4.后台方法辅助读取对象

public JsonResult FindUserById(Guid userId)
        {
            return Json(new { userModel= userBusiness.FindUserByID(userId)});
        }

Over--------------------

 

思考：

本想通过Cookie或Cache来存储通过后台得来的对象的，但是

Cookie存进去，再读出来时，发现object变成了string [object Object]了，有些人说是cookie不支持逗号，说是可以通过转义或加密可以实现，我通过escape对object加密了，貌似不是不行。

通过Cache可以读取对象，但是读出来的不是原来存的，是动态随着updateRow而改变的。

所以，上面遗憾的是，不能通过纯JS实现排序，得借助后台把那个覆盖的Model从数据库中读取出来。。。