JQgrid and jqgrid

JQgrid and jqgrid

Recently, I have been using the free jqgrid plug-in. I have a lot of online materials, but here I am still working on several small issues I encountered during the development process.

1. Automatic line feed

If there is too much data in a row, you need to automatically change the row based on the content.Chinese character line feedOrSpace line feedYou can insert the following code in the style label:

1 .ui-jqgrid tr.jqgrow td 2 {3       white-space: normal !important;4       height:auto;5       vertical-align:central;6       padding-top:2px;7  }

If you encounter a long string of English words, you mustInner line feed of English WordsYou can insert the following code in the style label when a problem occurs (not a space:

td {word-wrap:break-word ; }

2. Trigger the jqgrid table overload event

(1) Its js Code is as follows:

1 $ ("# list"). trigger ("reloadGrid ");

(2) parameters can be included when table overload is triggered. The js Code is as follows:

1 $ ("# list"). jqGrid ('setgridparam', {url: "192.168.1.1/web? Param1 = "+ param1 +" & param2 = "+ param1 +" & param3 = "+ param3}). trigger (" reloadGrid ");

3. dynamically hide/display Columns

Jqgrid provides APIs to dynamically hide certain columns. Its js Code is as follows:

1 $ ('# list'). jqGrid ('setgridparam'). jqGrid ('hidecol', ['col1', 'col2', 'col3']);

Jqgrid also provides APIs to dynamically display certain columns, as long as you replace 'hidecol' in the above Code with 'showcol.

4. Hide the horizontal scroll bar

The js Code is as follows:

1 $ ("# list"). closest (". ui-jqgrid-bdiv" ..css ({'overflow-x': 'den den '});

5. Multi-layer group display

Jqgrid provides the group display function. In fact, this function can be used for multi-layer grouping. The example below is to group col1 first, and then group col2 in the results.

1 grouping: true, // enable the grouping function 2 groupingView: {3 groupField: ['col1', 'col2'], 4 groupColumnShow: [false, false], 5 groupText: ['<div>], 6 groupCollapse: false, // do not fold 7 groupOrder: ['asc', 'asc '], 8 groupSummary: [false, false] 9 },

6. Center the header captain content

The js Code is as follows:

1 $('#list').closest("div.ui-jqgrid-view")2 .children("div.ui-jqgrid-titlebar")3 .css("text-align", "center")4 .children("span.ui-jqgrid-title")5 .css("float", "none");