从数据库回调jQuery小部件信息并在适当的位置显示小部件

我终于能够在这个问题的帮助下成功保存我的所有小部件信息。

现在，我完全迷失了如何做到这一点，因为这是我第一次不得不这样做。 我需要回调我的数据库信息以正确显示我的小部件。

这是我的仪表板jQuery。

$(function () { $('.dragbox') .each(function () { $(this).hover(function () { $(this).find('h2').addClass('collapse'); }, function () { $(this).find('h2').removeClass('collapse'); }) .find('h2').hover(function () { $(this).find('.configure').css('visibility', 'visible'); }, function () { $(this).find('.configure').css('visibility', 'hidden'); }) .click(function () { $(this).siblings('.dragbox-content').toggle(); }) .end() .find('.configure').css('visibility', 'hidden'); }); $('.column').sortable({ connectWith: '.column', handle: 'h2', cursor: 'move', placeholder: 'placeholder', forcePlaceholderSize: true, opacity: 0.4, start: function (event, ui) { //Firefox, Safari/Chrome fire click event after drag is complete, fix for that //if ($.browser.mozilla || $.browser.safari) $(ui.item).find('.dragbox-content').toggle(); }, stop: function (event, ui) { ui.item.css({ 'top': '0', 'left': '0' }); //Opera fix //if (!$.browser.mozilla && !$.browser.safari) updateWidgetData(); } }) .disableSelection(); }); 

我可以使用以下内容并使用Handler和数据类保存到数据库。

 function updateWidgetData() { var items = []; $('.column').each(function () { var columnId = $(this).attr('id'); $('.dragbox', this).each(function (i) { var collapsed = 0; if ($(this).find('.dragbox-content').css('display') == "none") collapsed = 1; //Create Item object for current panel var item = { id: $(this).attr('id'), collapsed: collapsed, order: i, column: columnId }; //Push item object into items array items.push(item); }); }); //Assign items array to sortorder JSON variable var sortorder = { items: items }; $.ajax({ url: "/Handlers/SaveWidgets.ashx", type: "POST", contentType: "application/json; charset=uft-8", dataType: "json", data: JSON.stringify(sortorder), success: function (response) { $("#console").html('
Dashboard Saved
').hide().fadeIn(1000); setTimeout(function () { $('#console').fadeOut(1000); }, 2000); }, error: function (error) { alert("Failed passing json."); } }); 

信息在数据库中的显示方式如下所示。

这是我的aspx，显示小部件（仅显示2列，例如每个小部件1个）

 
 
 
Current Deals per Location
 
  //columns  
 
 
 
 
 
Total Processed Deals per Location
 
 //content for the widget 
 
  

现在，我不确定我会怎么做。 我需要从tWidgets表中调用信息并以正确的排序显示。 0是列中的第一个位置，后跟1,2,3。我不确定是否应该在页面加载时执行此操作，或者使用处理程序执行此过程会更好。 我不知道从哪里开始。 我发现的唯一信息是如何在PHP中执行此操作，但这对我没有帮助。 如果有人能指出我正确的方向，那将非常感激！

编辑 ：我创建了一个WebService，它检索窗口小部件信息，然后在页面加载时将其传递给ajax。

网络服务

 public class RetrieveWidgets : System.Web.Services.WebService { [WebMethod] [ScriptMethod(ResponseFormat = ResponseFormat.Json)] public List GetWidgets() { SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["dboCao"].ConnectionString); List listData = new List(); int getUserId; string userName = HttpContext.Current.User.Identity.Name; conn.Open(); using (SqlCommand cmdGetUserId = new SqlCommand("SELECT UserId FROM tUser WHERE UserName = @UserName", conn)) { cmdGetUserId.Parameters.AddWithValue("@UserName", userName); getUserId = Convert.ToInt32(cmdGetUserId.ExecuteScalar()); System.Diagnostics.Debug.Write(" --------------- " + getUserId + " --------------- " + userName + " ---------"); } using (SqlCommand cmdGetWidgets = new SqlCommand("SELECT Title, SortNo, Collapsed, ColumnId FROM tWidgets WHERE UserId = @UserId", conn)) { cmdGetWidgets.Parameters.AddWithValue("@UserId", getUserId); using (SqlDataReader rdr = cmdGetWidgets.ExecuteReader()) { while (rdr.Read()) { RetrieveWidgetsDAL widgetDAL = new RetrieveWidgetsDAL(); widgetDAL.Title = rdr.GetString(0); widgetDAL.SortNo = rdr.GetInt32(1); widgetDAL.Collapsed = rdr.GetInt32(2); widgetDAL.ColumnId = rdr.GetInt32(3); listData.Add(widgetDAL); } } } conn.Close(); return listData; } } 

阿贾克斯

 $(document).ready(function () { $.ajax({ type: "Post", contentType: "application/json; charset=utf-8", url: "Webservices/RetrieveWidgets.asmx/GetWidgets", dataType: "json", success: function (response) { alert(response.d); // try using data.d }, error: function (repo) { console.log(repo); }, error: function (error) { $("#console").html('
Dashboard could no load!
').css('visibility', 'visible').fadeTo(600, 1); setTimeout(function () { $('#console').delay(500).fadeTo(600, 0); }, 1000); } }); }); 

现在，我的问题是，有没有办法使用jQuery根据数据库信息将小部件放入正确的位置？

json信息看起来像这样..

{d：[{__ type：“CentralLogin.Data.RetrieveWidgetsDAL”，标题：“CurrentDealsWidget”，SortNo：0，Collapsed：0，ColumnId：1}，{__ type：“CentralLogin.Data.RetrieveWidgetsDAL”，标题：“StorePayrollWidget” ，SortNo：1，Collapsed：0，ColumnId：1}，{__ type：“CentralLogin.Data.RetrieveWidgetsDAL”，标题：“ObjectiveWidget”，SortNo：2，Collapsed：0，ColumnId：1}，{__ type：“CentralLogin。 Data.RetrieveWidgetsDAL“，Title：”ReportWidget“，SortNo：0，Collapsed：0，ColumnId：2}

Answer 1

 $(document).ready(function() { var response = '{"d":[{"__type":"CentralLogin.Data.RetrieveWidgetsDAL", "Title":"CurrentDealsWidget", "SortNo":0, "Collapsed":0, "ColumnId":1}, {"__type":"CentralLogin.Data.RetrieveWidgetsDAL", "Title":"StorePayrollWidget", "SortNo":1, "Collapsed":0, "ColumnId":1}, {"__type":"CentralLogin.Data.RetrieveWidgetsDAL", "Title":"ObjectiveWidget", "SortNo":2, "Collapsed":0, "ColumnId":1}, {"__type":"CentralLogin.Data.RetrieveWidgetsDAL", "Title":"ReportWidget", "SortNo":0, "Collapsed":0, "ColumnId":2}]}'; var te = JSON.parse(response) function sortResults(prop, asc) { te.d = te.d.sort(function(a, b) { if (asc) return (a[prop] > b[prop]) ? 1 : ((a[prop] < b[prop]) ? -1 : 0); else return (b[prop] > a[prop]) ? 1 : ((b[prop] < a[prop]) ? -1 : 0); }); } sortResults('SortNo', true); for (var i = 0; i < te.d.length; i++) { $('#test ul').append('
'+te.d[i].Title+'
') } });