listview control: design and implementations

Download PDF
2 downloads 0 Views 2MB Size Report
Comment
Page 1 ..... many other operations like being drop target, drag source or column resizing. ... support the ability of width resizing during the running time. The list ...
LISTVIEW CONTROL: DESIGN AND IMPLEMENTATIONS Ammar Hawbani ([email protected]) Draft TABLE OF CONTENTS Chapter 1 ListView control ......................................................................................................................... 1 Intent ........................................................................................................................................................................2 Motivation ...............................................................................................................................................................2 Applicability ...........................................................................................................................................................3 Structure .................................................................................................................................................................3 Physical Points ......................................................................................................................................................4 List view header .........................................................................................................................................................7 List view body ............................................................................................................................................................9 Designing Issues ...................................................................................................................................................10 List View Cell: ...........................................................................................................................................................10 List View Row: ..........................................................................................................................................................13 Column class ............................................................................................................................................................17 List view object ........................................................................................................................................................27 Disabling Text Selection for Drag-and-Drop ............................................................................................................46 Sorting......................................................................................................................................................................47 List view functions ...................................................................................................................................................53 Add column function: ..........................................................................................................................................53 Column events .....................................................................................................................................................54 Drag event ...........................................................................................................................................................56 Drop drag .............................................................................................................................................................60 Resizing ................................................................................................................................................................62 Create Your ListView ............................................................................................................................................65 Add rows ..............................................................................................................................................................65

CHAPTER 1 LISTVIEW CONTROL

1

INTENT With a list view, users can view and interact with a collection of data objects, using either single selection or multiple selections, The ListView control is a great way to display file system information and data from a XML file or database. The ListView control is typically used to display a graphical icon that represents the item, as well as the item text. In addition, Sorting for the ListView control is provided by using the Sorting property of the ListView. MOTIVATION List views have more flexibility and functionality than list boxes. Unlike list boxes, they support changing views, grouping, multiple columns with headings, sorting by columns, changing column widths and order, being a drag source or a drop target, and copying data to and from the clipboard. If tree views are all about displaying node hierarchies, like the folder hierarchy on a disk, then list views are all about displaying lists of items. You can see a list view in the right pane in the Windows Explorer (the part that displays what files are in a folder). The Figure 1.1 below shows a list view control with four headers sometimes call it columns. The rows records of the list view are sorting according to the values of cells of the ‘country’ header. Let call it the sorting header, the upper part of illustration shows the data with ascending sort, in other hand the lower part of figure 1.1 indicate the descending data sorting.

Figure 1.1: List view with sorting data List view also supports the drop dragging function of headers (this function need two headers to be accomplished, one of them being as drag source and the other one is the drop target). The drop dragging operation is a process intended to change the position of the two existing headers within list view using mouse drag event per one drop drag time. Drop dragging two headers ( columns ) means to swap the headers , the illustration1.2 below shows that the list view header of country column is replace the header of the student name column and Vice versa.

2

Figure 1.2: list view with column switch In the Figure 1.3 below shows the headers of list view with different width values. This operation accomplished by change the width of headers (to be greater than current width value or lesser than it) by clicking mouse at the most left part of the header and move it to left or to the to the right of the target column. The moving to the left of current column means to resize it to be greater than the current width value, whereas the moving of mouse to right side of current column means that to shrink the size of target column to be smaller than the current value.

Figure 1.3: column resizing This chapter explains how to design list view control from scratch. Not only focusing on the visual issues and skin, but also enlarged to the main core operations, which should be helpful to the users. For example, get and set the text caption for each cell inside list view, column storing and others advance methods to perform the style viewing of the list view. This chapter also covers the events of the list view such as column drop dragging and resizing. APPLICABILITY

Use the list view when need to display data in way like table from database provide the user with facilities to perform sorting operation of rows by specific column in time give the user more convenient of how to display data. List view provide the user by many other operations like being drop target, drag source or column resizing. STRUCTURE

3

The structure of list view look like figure 1.4, list view object hold independent two nested objects. The first object is Column and the second is Row class. The Row class contains the nested class, which is called Cell. Each class has its operations and attributes.

Figure 1.4 List view structure PHYSICAL POINTS Throughout this book, in all chapters the process of designing issues is starting by the physical points. The physical points are the construction HTML elements that the controls can be built from. Those elements are gathering to give the visual aspects of the interface control.

The physical points are important enough to be considered during the design process. Because the creation steps of the target control are stand on physical points. physical points are: the html elements (tags) that suggested to accomplish a perfect designing and viewing of the target control. This chapter makes the most complex control clearer. List view is complex control, due to the rich events, functions, method, and properties it holds. It has capability of support users and developers. List view use to organize a lot of data and information in way such tables, but it is not an actual table. It has many advantages. Like the table, the list view has the same outlook. Unlike table, list view support many operations such columns resizing and drop dragging. Physically, what is the list view? Is it collection of list boxes? or is it similar to grid view? I hunted to say that the list view is like grid view. The grid view headers are different from the list

4

view headers In the property of each header in the grid view is act as container for other controls such check box , text box or any others, also each cell in the column header of grid view should has the same type of control. That is to say, the header part acts as control type and all cells of the header will have the same type of control, but no such features in the list view headers. List views are intended to collected string data values but not for holding any nested control type. Being fairly, we say what the common property between these two controls (the list and grid views), is both have the column resizing and drop dragging events. Both of list view and grid view are rich controls. They have many properties, methods and events, which make it a full functional to provide many facilities to display data. To get more information about these two control, you can go to MSDN website. By the way, u can open your windows from application in VS 2003 version or newer to get some basic info about the list view properties. The list view is not a collection of list boxes. List view cannot be a collection of list boxes for one straightforward reason: no list box supported to be drop source or drag target, and no list box support the ability of width resizing during the running time. The list view is not collection of list boxes although it look have the same structure. Finally, what is the list view control? The list view control is collection of columns each one can be resized, the columns can switched it position with other existing one inside the same list view. From html points of view the list view is like table contains many rows and columns inside, I think that is easy to get it, but still an once-over of list view without comprehensive understanding the core operations of list view, so first view of list view is like the figure1.5 below :

Figure 1.5: list view physical point structure Figure 1.4 show that list view composed of two main parts. The headers container part (the top part) and the body part (bottom part). We still need to explain each physical component of list view in detailed, so the list view consist of two main components which are the header and the body, first we go with header part.

5

During this chapter and most of the chapter of this book, we are going to use the Element class to create a new element of HTML tags. This class created a new element and providing the basic methods to access the tag of HTML. The basic methods like: setID, getID, append, setParent, getX and getY. function Element(Tag) { var element=document.createElement(Tag); var parent; var id=""; this.setId=function(eleId) { element.id=eleId; id=eleId; } this.getId=function(){return id;} this.setClassName=function(classN) { element.className=classN; } // append to body: this.append=function() { document.body.appendChild(element); parent='body'; } this.setParent=function(pid) { parent=document.getElementById(pid); parent.appendChild(element); } this.getParent=function(){return parent;} this.getObject=function(){return element;} } function getX(oEvent) { return oEvent.clientX; } // current y position of the screen. function getY(oEvent) { return oEvent.clientY; }

6

LIST VIEW HEADER

The header part give the user notation of the category of the data displayed in the each header, it is also the pool of others operations like the sorting, resizing and columns drop dragging.

Figure 1.6: List view header stance The figure 1.7 below shown the headers located at the top of the list view. All headers are placed in line. The header’s container might contains many columns. Each header or column contain three elements inside: the first one located at the most left of the TD element knowing as the sorting icon to notate the user about the current column’s state being sorting or not. The second component of the header is the caption part holds the header caption located at the middle of Td element. The third is the resizing area or the splitter, is located at the right most of the TD element.

7

Figure 1.7: Physical points of the header of list view The figure 1.8 below shown the html tags for the headers container. It depicted the list view with complex physical structure. This is because the complex functions of the rich control and the flexibility as well. Figure 1.8 shown entire nested element of the header. You are going to learn how to build these tags dynamically with one line of code. The list view you will create is an instance of objected oriented list view, no need to write HTML tags. Dynamic creation of element: the way of how to create html tag using the facilities of java script, that is to say we do not need to write HTML tags manually. We are going to create them dynamically using java script during runtime. By one line of creating a new instance of the list view object, it will create all the HTML tags shown in the figure 1.8.

Figure 1.8: The logical and physical structure of the header of the list view

8

LIST VIEW BODY

The body of the list view is the part that responsible of holding the data in array style. it is the is the area where the rows placed in, so we say the body is consist of many rows , each row contain x number of cells ,where x is the columns count inside the list view headers container , the row is TR element whereas the cell is TD.

9

Figure: 1.9: List body logical structure DESIGNING ISSUES Now it is easy to design nice look with full functionality Listview control. As we said above, we are going to create each component of this control using Js.We start the journey by the header part and finish it by the body part of this control. Our target to design the list view with simple Steps. We are going to deal with each component of Listview as an independent class staring from the Cell, Row, Column and the list view itself (see the structure figure 1.4). The cells are lined up together to generate new rows. The Rows are stacked together to create the body of list view. The column generate the headers container. The body and header container generates the list view object. Dealing with each component as independent object give many benefits such easily upgraded from small to large-scale .It is easy to partition the work in a project based on objects. It reduces maintenance and developing costs. LIST VIEW CELL:

Cell is the basic module of the list view body and the initial block of the list row. It has simple physical structure, which is Td element inside the row element TR. Creating the cell object is very simple, just need to create new class with name Cell contains the input and output ports for the cell instance. In the figure 1.10, the cell object starting by define the public shard variables over the entire cell class. The caption is the text within the cell. th is a variable to create the html element of the cell, the thObj is the cell Dom object give you facilities to control the CSS style of html element during js code, cellId is the identifier of the cell object.

Figure 1.10: Cell object structure The Cell Object is started by define the public variables (var caption;) and (var th,thObj,cellId;). The caption variable to hold the text string for cell, th is the HTML element of cell, thObj is the object of cell, cellId the ID of cell. // Cell object, nested class function Cell() { var caption; // the string content of cell. var th,thObj,cellId; // add new cell this.add=function() { th=new Element('td');// new TD element. cellId=gid+'cll_'+cellCount; th.setParent(tr.getId());

10

th.setId(cellId); th.setClassName('cell'); thObj=th.getObject(); cellCount++; } // set the text of the cell, or any object the cell contain. this.setText=function(val) { caption=val; return rowCellsItems[cellCount-1]; } // get the text of the cell, or any object the cell contains. this.setValue=function(val) { thObj.innerHTML=val; caption=val; return rowArray[rowCount-1]; } // index of the cell this.getIndex=function() { return cellCount; } // the ID of the cell. this.getId=function() { return cellId; } this.getText=function() { return caption } // get the Row where the cell located. this.getRow=function() { return rowArray[rowCount-1]; // rowArray is } } The course of creating new cell is begin by [this.add=function()]. The add() function carry out attaching TD element to definite row. The function implemented by create a new instance of Element class [th=new Element('td');] and append it to the current row. Each new cell should have CSS style [th.setClassName('cell');]. .cell { color:inherit;

11

font:caption; cursor: default; text-align:center; /*text over flow: needd*/; text-overflow:ellipsis; overflow: hidden; white-space:nowrap; border-collapse:collapse; border-left:1px #99BBE8 solid; } Each cell object is exact initiate by create new instance of Element class [new Element('tag');], that is to say the invoking of add() function of cell object is starting by create new instance of Element object.

Figure 1.11: Cell structure generation The cell object still has some important input and output functions purposed for reading and writing. Those functions are performing some tasks like set the text inside the cell [this.setText=function(val)], get the text inside the cell [ this.getText=function() ], and get the ID of the cell. The code below show that. The set or get text value of any html object processed by call the primitive property innerHtml.

12

Figure 1.12: Set text function LIST VIEW ROW:

The Row class is an object that contains a finite number of cells. It placed within the body part of the list view. From physical point of view, the Row class is a TR element; it is created as new instance of the Element Class. The Row object has an alternative two CSS styles, one for the even rows and one for the odd ones. It has two different styles; those rows with odd index are set to the odd style and those with even indexed set to be even style. Each Row class build up from a finite number of Cells object, concretely Row object is TR element, which may hold a finite number of td element. Figure 1.13 shows the generation scenario of row object.

13

Figure 1.13: Row object // Row Object function Row() { var rowId; var rowCellsItems=new Array();// the cells of this Row var cellCount=0; var tr,trObj; // HTML tag, Dom Object. tr=new Element('tr'); rowId=gid+'r_'+rowCount; tr.setId(rowId); tr.setParent(tbody.getId()); // odd or even row: if(rowCount%2==0) // even or odd row. { tr.setClassName('evenRow'); } else { tr.setClassName('oddRow'); } rowCount++; // add the cells with caption values this.addCells=function(arr) {

14

for(var i=0;i< columnCount;i++) { celll=new Cell(); // create Cell object. celll.add(); // call the add() celll.setText(arr[i]); rowCellsItems.push(celll); } return rowCellsItems; } // add new Cell with no caption. this.add=function() { for(var i=0;i< columnCount;i++) { celll=new Cell(); celll.add(); rowCellsItems.push(celll); } return rowCellsItems; } // return the cell obj: this.setCellText=function(cellIndex,val) { var celObj=rowCellsItems[cellIndex]; celObj.setText(val); return celObj; } this.getCellText=function(cellIndex) { var celObj=rowCellsItems[cellIndex]; return celObj.getText(); } // return the all cells inside the the row: this.getCells=function() { return rowCellsItems; } this.cell=function(x) { return rowCellsItems[x]; } this.rowIndex=function() { return rowCount;

15

} this.getId=function() { return rowId; } Let see the odd and event css style before creating the row element, two styles here just to make the user reading and explore the list view rows easily.

Figure 1.14: Row outlook .oddRow { background:#ECF5FF; border-collapse:collapse; color:#3399FF; } .evenRow { background:#D7FFFF; color:#FF9900; border-collapse:collapse; } As we said above the row might be contain at least one cell inside. New cell inside the row is new instance of the Cell class created before. The count of cells inside the row must be equal to count of columns. The addcells function has arr parameter which is an array with length of column count. Each item of array is a caption value of cell inside. This function also return the cells instances inside the current row.

16

Figure 1.15: Row elements & components Some time we do not need to create the caption value of the cell directly. Therefore, we do not need the array of captions like the function addCells above. We just need to create the instances of the cells only without considering what the caption value is. This way give the user more chance to customize the list view. The only difference between the function add() and addCells() is that the last has an array of text value inside the cell. The row object also provide facilities to read (getCellText) and write (setCellText) of specific cell inside using a specific index. These functions implemented as above in the Row class. The set function (setCellText) is to set the caption value for the current instance of the cell, but not the current created Dom object of the cell element. The get function (getCellText) return the text caption of the current instance of cell class that is reading getText function of the Cell class. The (getCells) function just to get all instance of the Cell classes created in the current row, it return a collection of cells class instances. Cell function inside the class of row, just to enhance the accessibility reading to list view, that is to say the user can set the value of the cell. The Row function return collection of the cell instances, but the cell function is return only one cell. The last two functions inside the Row class are to get the id and the object of the current row. COLUMN CLASS

Back to the physical infrastructure of the column header, it is consist of three main elements: earliest element for the sort notification, next for the text value, and the last is a splitter. We are going to construct them one by one, but first we make out the public shared variables in the column class, every column has its own width, and element inside it like the sorting icon and the text value

17

Figure 1.16: Column object function Column() { var myWidth; var resizorElement,resizorId,resizorObj; var colTd,colTdObj;// the element , the object of col: var caption;// the text value of col var myindex;// the index of col var myId;// the id of col var sortIcon,sortIconObj,sortId,sortType='dscending'; // the sort icon of col,the sort id, the sort typ var coltxt,coltxtObj,txtcolId; this.add=function() { colTd=new Element('th'); colTd.setParent(theadTr.getId()); myId=gid+'c_'+columnCount; colTd.setId(myId); colTd.setClassName('Header'); colTdObj=colTd.getObject(); columnObjectArray.push(colTdObj); sortIcon=new Element('div'); sortIcon.setParent(colTd.getId());

18

sortId=gid+'icon_'+columnCount; sortIcon.setId(sortId); sortIcon.setClassName('NoneSort'); sortIconObj=sortIcon.getObject(); coltxt=new Element('div'); coltxt.setParent(colTd.getId()) txtcolId=gid+'txt_'+columnCount; coltxt.setId(txtcolId); coltxt.setClassName('caption'); coltxtObj=coltxt.getObject(); resizorElement=new Element('div'); resizorElement.setParent(colTd.getId()); resizorElement.setClassName('splitter'); resizorId='s_'+columnCount; resizorElement.setId(resizorId); resizorObj=resizorElement.getObject(); columnCount++; myindex=columnCount-1; // set the parent width: parentObj.style.width=(columnCount+1)*colWidth+'px'; return columnArray[columnCount-1]; } /*-----------------------*/ // sort type: sort objects: this.setSortType=function(varl) { if(varl=='ascending') { sortType=varl; } else { sortType='dscending'; } } this.getSortType=function() { return sortType; } this.getSortIconId=function() { return sortId;

19

} this.getSortIconObject=function() { return sortIconObj; } this.setAscending=function() { sortIcon.setClassName('ascending'); } this.setDscending=function() { sortIcon.setClassName('descending'); } // claer sorting icon of the col this.clearSorting=function() { sortIcon.setClassName('NoneSort'); } // caption part: this.setCaption=function(val) { caption=val; coltxtObj.innerHTML=val; return columnArray[columnCount-1]; } this.getCaption=function() { return caption; } this.getCaptionId=function() { return txtcolId; } this.getCaptionObject=function() { return coltxtObj; } // resizing part: this.getResizorId=function() { return resizorId; }

20

this.getResizorObject=function() { return resizorObj; }

//column part: this.getColumenCount=function() { return columnCount; } this.getIndex=function() { return myindex; } this.getId=function() { return myId; } this.getObject=function() { return colTdObj; } this.setWidth=function(val) { if(val>20) { myWidth=val; colTdObj.style.width=val+'px'; } else { myWidth=20; colTdObj.style.width=20+'px'; } } this.getWidth=function() { return myWidth; } }// end of column class

21

The column class started by the public shared variables. The key function of the column class is the add function see figure 1.15. This function initialed by create the column header inside the container as a new instance of the Element class and place this new instance in the tHeadTR Dom object which actually is the headers container. All headers have the same initialization of CSS style as below: .Header { background-image:url('images/ListViewBorder.png'); background-repeat:repeat-x; width:40px; height:20px; font-size:12px; text-decoration:blink; text-align:center; /*text over flow: needd*/; cursor:default; padding-bottom:3px; border-left:1px #99BBE8 solid; border-collapse:collapse; overflow: hidden; } After the header container part, we are going to construct the first module inside header, which is the sorting icon. It also created as new instance of the Element class placed in the current header; the sort icon is div html element. sortIcon=new Element('div'); sortIcon.setParent(colTd.getId()); sortId=gid+'icon_'+columnCount; sortIcon.setId(sortId); sortIcon.setClassName('NoneSort'); sortIconObj=sortIcon.getObject(); According to the states of sorting, we design three-fixed Css style for the sorting icon: First, one is none-sort; second one for the ascending sort and the last one for the descending sorting. .Header .descending { padding-top:3px; width:9%; height:16px; background-image:url('images/descending.png'); background-repeat:no-repeat; background-position:left top; float:left; border-collapse:collapse; }

22

.Header .NoneSort { padding-top:3px; width:0%; height:16px; background-repeat:no-repeat; background-position:left top; float:left; border-collapse:collapse; }

Figure 1.17: Headers sorting tip CSS styles The second element inside the column is the caption value associated with this header. It is new instance of the Element class placed inside the current header; the caption element is div element. coltxt=new Element('div'); coltxt.setParent(colTd.getId()) txtcolId=gid+'txt_'+columnCount; coltxt.setId(txtcolId); coltxt.setClassName('caption'); coltxtObj=coltxt.getObject(); The caption value element has an associated style as below: .Header .caption { width:80%; height:inherit; font-size:12px; text-decoration:blink; text-align:center; /*text over flow: needd*/; text-overflow:ellipsis; overflow: hidden; white-space:nowrap; cursor:default; float:left; color:#585858; font-size:12px; font-style:italic; font-variant:small-caps;

23

font-weight:bold; text-decoration:blink; } The last element inside the header is resizing area, which is placed at the right most of the header; it is also new instance of the Element class. resizorElement=new Element('div'); resizorElement.setParent(colTd.getId()); resizorElement.setClassName('spiltor'); resizorId='s_'+columnCount; resizorElement.setId(resizorId); resizorObj=resizorElement.getObject(); It also has associated style sheet .Header .splitter { float:right; width:5PX; height:inherit; background:transparent; cursor:w-resize; border-collapse:collapse; } .splitter:hover { cursor:w-resize; border-collapse:collapse; } The column class provides some functions for each component inside. Below we explain the implementation of some functions in detailed. Stating from the sorting icon component (setSortType), we need to change the icon of the sorting header to be up mark or down mark according to the sorting type. The storing type might be either ascending or descending two possible values only. this.setSortType=function(varl) { if(varl=='ascending') { sortType=varl; } else { sortType='dscending'; } }

24

We just need to change the CSS class name for current sorting element this.setAscending=function() { sortIcon.setClassName('ascending'); } this.setDscending=function() { sortIcon.setClassName('descending'); } The clear sorting ports need to clear sorts icon for the current column: // claer sorting icon of the col this.clearSorting=function() { sortIcon.setClassName('NoneSort'); } The (getSortType) functions design return the sorting type. The (getSortIconId) is to return the ID of the current sorting column. The (getSortIconObject) is to return the object of current sorting column. this.getSortType=function() { return sortType; } this.getSortIconId=function() { return sortId; } this.getSortIconObject=function() { return sortIconObj; } The second component is the caption. Below let us explain the functions provided from the column object to enhance the customizability of caption component. It provided some functions like (setCaption) to set the caption of column and (getCaption) to get the text of header.

// caption part: this.setCaption=function(val) { caption=val; coltxtObj.innerHTML=val; return columnArray[columnCount-1]; } this.getCaption=function()

25

{ return caption; } Two functions also here to get the information about the caption object this.getCaptionId=function() { return txtcolId; } this.getCaptionObject=function() { return coltxtObj; } The last component is the splitter, the one who control the resizing of width of the current column, the column class provide some reading method to access it // resizor part: this.getResizorId=function() { return resizorId; } this.getResizorObject=function() { return resizorObj; } /*-----------------------*/ We ended the column class by the functions to the column itself. These functions are provide convenient access to customizing the current instance of the column. Properties like the width, the index, the ID, the object and the columns count. The (getColumenCount) function return the number of the columns exist currently inside the list view header container. The (getIndex) return the current order of the column in other hand the function ( getId )return the identifier name of current column. The last function (getObject) returns the Dom object of the column, which used to access the CSS style through JS. this.getColumenCount=function() { return columnCount; } this.getIndex=function() { return myindex; } this.getId=function() { return myId;

26

} this.getObject=function() { return colTdObj; } The (setWidth) and (getWidth) functions intended to change the column width and to get the current value of width. The value of width cannot be lower than 20px. this.setWidth=function(val) { if(val>20) { myWidth=val; colTdObj.style.width=val+'px'; } else { myWidth=20; colTdObj.style.width=20+'px'; } } this.getWidth=function() { return myWidth; } After we created the Cell, Row and Column three classes, now it is time to create the list view itself using the classes above Element class. Column class, Row class and the Cell class are the basic blocks of list view. The ListView is also class contains the block classes as subclass inside. LIST VIEW OBJECT

Let us review the physical points of the Listview control. The Listview is collections of rows and columns. Each row is collections of cells. We have all these materials now. we have the column class, the cell class and the row class. List view consist of two main components rows body and headers container, here we start to create the list view its self , by creating new instance of the Element class. The obj is the Dom object of Listview , the theadObj is the header container dom object and the tbodyObj is the list view body dom. The ListView class is in the code below. function ListView(gid) {

27

//events: var Drag_Last_column_MU=-1;// the last mouse-up column var Drag_Last_column_MD=-1; var colWidth=0;// the width of the coulmn. var Resize_MD=-1;// when the mouse get down in the resizing area of the column. // var ResizeWidth=0; var columnObjectArray=new Array(); // parent propertesi: var width,height,left,top; var parentObj; // public shard: var parentLeft;// resizing problem var rowCount=0; var columnCount=0; var columnArray=new Array(); var rowArray=new Array(); var obj,theadObj,tbodyObj; var gv; gv=new Element('table'); // new element gv.setId(gid); // set the id gv.setClassName('ListView'); obj=gv.getObject(); //head: thead=new Element('thead'); thead.setClassName('thead'); thead.setId(gid+'head'); var theadTr=new Element('tr'); theadTr.setId(gid+'HeaderTr'); var theadTrObj=theadTr.getObject(); //tbody: tbody=new Element('tbody'); tbody.setId(gid+'body'); this.append=function() { gv.append(); // not allowed to selection Text: obj.onselectstart = function() { return false; };

28

obj.unselectable = "on"; obj.style.MozUserSelect = "none"; obj.style.cursor = "default"; thead.setParent(gid); theadTr.setParent(thead.getId()); tbody.setParent(gid); } //parent Setting: this.setParent=function(pid) { var pa=document.getElementById(pid); parentObj=pa; parentObj.className='parent'; pa.appendChild(obj); // not allowed selection Text: obj.onselectstart = function() { return false; }; obj.unselectable = "on"; obj.style.MozUserSelect = "none"; obj.style.cursor = "default"; thead.setParent(gid); theadTr.setParent(thead.getId()); tbody.setParent(gid); } // size: this.setWidth=function(val) { width=val; parentObj.style.width=val+'px' } this.setColumnWidth=function(val) { colWidth=val; } this.getWidth=function() { return width; } this.setHeight=function(val) {

29

height=val; parentObj.style.height=val+'px' } this.setSize=function(w,h) { this.setWidth(w); this.setHeight(h); } //margin: this.setMarginLeft=function(val) { left=val; parentObj.style.marginLeft=val+'px' } this.setMarginTop=function(val) { top=val; parentObj.style.marginTop=val+'px' } this.setMargin=function(l,t) { this.setMarginLeft(l); this.setMarginTop(t); } // Functions: add new col this.addColumn=function(caption) { var isAscending=false; var col=new Column(); col.add(); col.setCaption(caption); columnArray.push(col); col.setWidth(colWidth); // set events: var captionObj=col.getCaptionObject(); var myObj=col.getObject(); var myIndex=col.getIndex(); var resizorObj=col.getResizorObject(); captionObj.onclick=function() { // clearSorting: for(var i=0;i1) { if(col.getSortType()=='dscending') { sortAscending(col.getIndex()); col.setSortType('ascending'); col.setAscending(); } else { sortDscending(col.getIndex()); col.setSortType('dscending'); col.setDscending(); } } } /*drag on mousedown,mouseup*/ function changeToMoveAll() { for(var x=0;x< columnArray.length;x++) { var columnx=columnArray[x]; var captionObject=columnx.getCaptionObject(); var tdObj=columnx.getObject(); tdObj.style.cursor='move'; captionObject.style.cursor='move'; } // rows: } function changeToResizeAll() { for(var x=0;x< columnArray.length;x++) { var columnx=columnArray[x]; var captionObject=columnx.getCaptionObject(); var tdObj=columnx.getObject(); tdObj.style.cursor='w-resize'; captionObject.style.cursor='w-resize'; } }

31

function changeToDefAll() { for(var x=0;x< columnArray.length;x++) { var columnx=columnArray[x]; var captionObject=columnx.getCaptionObject(); var tdObj=columnx.getObject(); tdObj.style.cursor='default'; captionObject.style.cursor='default'; } } captionObj.onmousedown=function() { Drag_Last_column_MD=col.getIndex(); changeToMoveAll(); } captionObj.onmouseup=function() { Drag_Last_column_MU=col.getIndex(); if(Drag_Last_column_MD!=Drag_Last_column_MU) { if(Drag_Last_column_MD>-1 && Drag_Last_column_MU>-1) swapColumns(Drag_Last_column_MD,Drag_Last_column_MU); } changeToDefAll(); } captionObj.onmouseout=function() { captionObj.style.cursor='default'; } //Resizing theadTrObj.onmousemove=function() { if( Resize_MD>-1) { try { changeToResizeAll(); var currentCol=columnArray[Resize_MD]; var widths=0; for(var x=0;x