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从数据库中读取出来。。。