JQuery library: jqGrid

JQuery turi dar vieną galingą bibioteką - jqGrid. Ja galima formuoti dideles lenteles su JQuery arba statiškai apibrėžiant stulpelius su trirand dll pagalba.

http://www.trirand.com/blog/
http://labs.excilys.com/2011/03/19/dynamisez-vos-tableaux-avec-jqgrid/

JQuery: didelės lentelės vaizdavimas

Problema: didelė lentelė, kai norima, kad pirmas stulpelis būtų fiksuotas.

Sprendimas:

http://www.datatables.net/extras/fixedcolumns/

Pritaikant šią biblioteką svarbu, kad lentelės sutruktūra būtų būtent tokia, kokios reikalaujama http://www.datatables.net/usage/. Tam reikės papildomai į VB ASP.NET įdėti kodą, kuris nurodo, kur DataGrid'e bus headeris

< asp:DataGrid GridLines="Both" ID="dgTrainingMatrix1" runat="server" AutoGenerateColumns="true"

 UseAccessibleHeader="True"

< / asp:DataGrid >
Protected  Sub dgTrainingMatrix_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles dgTrainingMatrix.PreRender
 If dgTrainingMatrix.Rows.Count > 0 Then
dgTrainingMatrix.HeaderRow.TableSection = TableRowSection.TableHeader
   

End If


End Sub

Kadangi lentelės celėse yra paveiksliukai, tai kad jie būtų intepretuojami kaip HTML kodas, o ne tekstas, papildomai reikia: 

Protected Sub dgTrainingMatrix_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles dgTrainingMatrix.RowDataBound
If (e.Row.RowType = DataControlRowType.DataRow) Then
For i = 1 To (e.Row.Cells.Count - 1)
e.Row.Cells(i).Text = Server.HtmlDecode(e.Row.Cells(i).Text)

Next
End If
End Sub

 

DataGrid dinamiškai užpildomas taip:

Dim objDataTable As New System.Data.DataTable

objDataTable.Columns.Add(GetString(372), String.Empty.GetType())



For Each oc In oCources

Dim trCol As DataColumn = objDataTable.Columns.Add(oc.TrDTitle, String.Empty.GetType())

Next

For Each empl In oEmpl

Dim strList1 = New List(Of String)

strList1.Add(empl.NameLast & " " & empl.NameFirst)

For Each oc In oCources

Dim findCourse = False

For Each ot In otm

If (ot.tv.TrEmpID = empl.Id And ot.tv.TrDescID = oc.TrDID And findCourse <> True) Then

If ot.tv.TrIWILastTrainingIssueNo IsNot Nothing And ot.tv.TrIWIIssueNo IsNot Nothing And ot.tv.TrIWILastTrainingIssueNo > ot.tv.TrIWIIssueNo Then

strList1.Add("< img src='../ images/ TrainingMatrix/ matrix_update.gif' alt='' />")

ElseIf ot.tv.TrRefreshDate IsNot Nothing And ot.tv.TrRefresh IsNot Nothing Then

If (ot.tv.TrRefreshDate - Today.Date).Value.TotalDays < 0 Then

strList1.Add("< img src= '../ images/ TrainingMatrix/ matrix_update.gif' alt=' '/>")

Else

strList1.Add("< img src= '../images/ TrainingMatrix/ matrix_good.gif' alt=''/>")

End If

Else

strList1.Add("< img src='../ images/ TrainingMatrix/ matrix_good.gif' alt= '' />")

End If

findCourse = True

End If

Next

If findCourse <> True Then

strList1.Add("< img src='../ images / TrainingMatrix / matrix_bad.gif' alt = ' ' />")

End If

Next

objDataTable.Rows.Add(strList1.ToArray)

Next

If objDataTable.Columns.Count > 0 Then

Dim objDT As System.Data.DataTable = objDataTable

Me.dgTrainingMatrix.DataSource = objDT

Me.dgTrainingMatrix.DataBind()

End If

Galutinis rezultatas:

Yui Framework vs JQuery

Atviro kodo JavaScript ir CSS Frameworkas, padedantis sukurti interaktyvius web puslapius: http://yuilibrary.com/, pavyzdžiui, http://yuilibrary.com/yui/docs/dd/list-drag.html

Dažniausiai užduodami klausimai: http://yuilibrary.com/yui/docs/tutorials/faq/

Beje, kaip alternatyvą sukurti draggable aplikaciją, galima naudoti JQuery UI: http://docs.jquery.com/UI/Draggable 
JQuery  privalumas prieš YUI Framework tas, kad aiški sintaksė, trūkumas - viską rašyti reikia nuo nulio, kai tuo tarpu YUI siūlo jau daugmaž pradėtus variantus.