Dhtmlxgrid v3.0 Study Notes

Dhtmlxgrid v3.0 Study notesCategory: dhtmlx JavaScript2012-01-31 15:41 1744 people read Comments (0) favorite reports STYLESHEETDATECALENDARCSS Calendar XML

Directory (?) [+]

Because there is a need for page display and printing, so for Dhtmlxgrid to do a simple study, referring to the example given by Dhtmlxgrid to explore

1, must introduce the JS package [HTML]View Plaincopy

2. <link rel="STYLESHEET" type="text/css" href= "css/dhtmlxgrid.css">
4. <link rel="stylesheet" type= "text/css" href= "css/dhtmlxgrid_dhx_skyblue.css ">
6. <link rel="STYLESHEET" type="text/css" href= "css/dhtmlxcalendar.css">
8. <script src="Js/dhtmlxcommon.js"></script><!-- DHTMLX Foundation js-->
10. <script src="Js/dhtmlxgrid.js"></script><!--dhtmlxgrid base js-->
12. <script src="Js/dhtmlxgridcell.js"></script><!-- Dhtmlxgrid Foundation js-->
14. <script src="Js/dhtmlxcalendar.js"></script><!--support for date controls--
16. <script src="Js/dhtmlxgrid_excell_dhxcalendar.js"></script> <!--support for date controls--
18. <link rel="STYLESHEET" type="text/css" href="Css/dhtmlxcalendar_dhx_skyblue.css" >

2. Initialization code 2.1. Put a table container on the page first [HTML]View Plaincopy

1. <div id= "gridbox" style="width:503px;height:120px;background-color:white;" ></div>

2.2. Page initialization [HTML]View Plaincopy

2. <script>
4. Mygrid = new Dhtmlxgridobject (' Gridbox ');//similar to a declaration
6. Mygrid.setimagepath ("/imgs/"); Set Picture storage path
8. Mygrid.setheader ("Name,date of Birth, first book Published");//Set table header name
10. Mygrid.setinitwidths ("*,100,100"); Set table Initial column width
12. Mygrid.setcolalign ("Left,center,center");//Set table alignment
14. Mygrid.setcoltypes ("Ed,dhxcalendar,dhxcalendara");//Set the data type of each column
16. Mygrid.setcolsorting ("Str,date,date"); Set the sort type for each column
18. Mygrid.setskin ("Dhx_skyblue"); Set style
20. Mygrid.init (); To initialize
22. Mygrid.loadxml ("Data.xml"); Loading external Data
24. </Script>

Report: SetcoltypesSupported column types

Ro	Read-only
Ed	Small text, double-click Edit in place
Txt	Large amount of text, double-click to pop up a text area for editing
Ch	check box, the value is 1, the unselected value is 0
Ra	Single box, only one of the columns is selected, with a value of 1 selected
Coro	Drop-down list, users can only select values that are already in the list
Co	Compound drop-down list, which can be selected by the user or self-input
Img	Picture, read-only, value for the URL of the picture
Link	Link, the format of the value is "link text ^ link address ", non-normal hyperlink notation. (need to load Dhtmlxgrid_excell_link.js file to support it)
Calendar	Date, double-click the pop-up calendar. date format is mm/dd/yyyy. You need to load the Dhtmlxgrid_excell_calendar.js file to support it, and before you load the file, define the global variables _css_prefix,_js_prefix as follows:<script >_css_prefix= "styles/"; _js_prefix= "js/"; </script>

setcolsortingSupported Sort types:

Int	Integral type
Str	String
Date	Date

Dhtmlxgrid v3.0 Study Notes