directory StructureAfter extracting the Dwz-ria-1.4.5.zip, the directory structure is shown in Figure 2.1 below. The core script code of JS:DWZ, THEMES:CSS style, provides the default, Azure, green, purple, silver and other skins; uploadify: File Upload control. Figure 2.1
JS DescriptionThe cornerstone of 3.1,DWZ.CORE.JS:DWZ. More is the extension method of String, Ajaxerror (the default processing when Ajax error), Ajaxdone (the default processing when Ajax success). The client receives an ASP. NET WebMethod return value, which is more than layer d. DWZ in the Ajax method to accept the return value is {statuscode:xx,message: ' xxxx '} Such format, in the background WebMethod return such format, the foreground JS received {
D:{statuscode:xx,message: ' xxxx '}}. Obj2str, Jsoneval is the DWZ provided by the serialization/deserialization JSON function, in use found a bug, it is recommended to use Json2.js. 3.2,DWZ.AJAX.JS:DWZ provides an AJAX function. Callback functions with Paging (Navtabajaxdone, Dialogpagebreak), Ajax success (Navtabajaxdone, Dialogajaxdone). navtab, Dialog are two ways to display the page, Navtab: The screen displayed on the tab page, Dialog: Pop-up screen. 3.3,dwz.ui.js: Initialization of the screen. function Initui (_box) is the initialization of a series of DWZ tags, and the initialization of third-party controls is also placed here. After the ready event of jquery executes, the Initui is executed, and I used the Editable-select, treetable two controls in the project, initially initialized in the ready event, and happened to have their class and DWZ names, Debugging can not come out of that effect, and later see the debug code found not written in ready. 3.4,dwz.bardrag.js: The left active panel hides, displays 3.5,dwz.stable.js, and DWZ.CSSTABLE.JS:DWZ provides two tables. The corresponding labels are class= ' table '/class= ' list ' respectively. Csstable only supports sorting, stable functions more, supports sorting, and adjustment of column width. It actually turns the original table into 2, a table with column headings, a table with data rows, and a column header that adjusts the width of the other table accordingly. Using the process to find the generated table, mainly the data row of the one no id/name, unable to add data to the inside of the dynamic, so modified the next source code. from the display effect, csstable lines and lines are not separated by a thin line, stable. Compare the two CSS, in the \themes\css\core.css file,/* CSS Table */table.list TD This line increases border-bottom:solid 1px #ededed; Set TD bottom EdgeThe line style, width, and color of the box. Deficiency: Stable dynamically generates header columns (tables), with vertical scrollbars added to the right, so the column widths set in HTML are adjusted. When you encounter a multi-line header, an empty data row (new, no data row at the beginning, and a run-time add data), the header column and data column are misplaced. Instead, use csstable or modify the stable source code (I'm using csstable instead). 3.6,dwz.dialog.js: Pop-up screen for use. $.pdialog.getcurrent (): Gets the current pop-up screen 3.7,dwz.navtab.js: for the tab screen. Navtab.getcurrentpanel (): Gets the current Tab object
UI LayoutUsually on the Login.aspx page login, go to index.aspx (dwz-ria-1.4.5.zip index.html) page, this is the main page, the project to refer to the JS,CSS files are loaded here. Page layout:
| div id= "header". Title section of the page |
| Div id= "leftside" main Menu section |
div id= "Container" body part, multi-tab form display |
| div id= "Footer". Footer section |
The HTML code for the Navtab/dialog page is not formatted as usual
4.1, Query screen
<
H2
class= "Contenttitle" >xxxx list </
H2>
<cc1:pagingform
ID= "Pagerform"
runat= "Server" actionurl= "xxx"/>
<
Div
class= "PageHeader" >
<
form
ID= "Form1" onsubmit= "return Navtabsearch (this);"
Action= "XXXX"
Method= "POST"
runat= "Server" >
<
Div
class= "Searchbar" >
<
Table
class= "Searchcontent" >
<
TR>
<
TD>
Ref.:<
input
type= "Text"
name= "XXXX"
value= "xxxx"/>
</
TD>
<
TD>
Name:<
input
type= "Text"
name= "XXXXX"
value= "xxxx"/>
</
TD>
</
TR>
</
Table>
<
Div
class= "Subbar" >
<
ul>
<
Li><
Div
class= "Buttonactive" ><
Div
class= "Buttoncontent" ><button
type= "Submit" > Search </button></
Div></
Div></
Li>
</
ul>
</
Div>
</
Div>
</
form>
</
Div>
<
Div
class= "PageContent" >
<asp:repeater
ID= "Repeater1"
runat= "Server" onitemdatabound= "Repeater1_itemdatabound" >
<
HeaderTemplate>
<
Table
class= "Table"
width= "100%" layouth= "208" >
<
thead>
<
TR>
<
th
width= "</" > Serial number
th>
<
th
width= "</" > No.
th>
<
th
width= "</" > Name
th>
<
th
width= "</" > Operation
th>
</
TR>
</
thead>
<
tbody>
</
HeaderTemplate>
<
ItemTemplate>
<
TR>
<
TD><asp:literal
runat= "Server"
ID= "Lblrownumber"/> </
TD>
<
TD><% #NvStr (Eval ("Code"))%> </
TD>
<
TD><% #NvStr (Eval ("Name"))%> </
TD>
<
TD><asp:literal
runat= "Server"
ID= "Lbtcommand"/>
</
TD>
</
TR>
</
ItemTemplate>
<
FooterTemplate>
</
tbody>
</
Table>
</
FooterTemplate>
</asp:Repeater>
<cc1:pagingfoot
runat= "Server"
ID= "Pagingfoot"/>
</
Div>
4.2, new/Edit screen for single tableCode: <%@ page language= "C #" autoeventwireup= "true" codebehind= "Xxxx.aspx.cs" inherits= "xxxx"%> <
Div
class= "PageContent" >
<
form
Method= "POST"
ID= "XXXX"
class= "Pageform required-validate"
Onsubmit= "Return Validatecallback (this, navtabajaxdone);" >
<
Div
class= "Pageformcontent" layouth= ">"
<
P>
<label> name:</label>
<
input
name= "Name"
class= "Required"
type= "Text"
size= "/>"
</
P>
<
P>
<label> Total:</label>
<
input
name= "Total"
type= "Text"
size= "30"
class=
