LigerUI experience 1: pageSize, automatic refresh and other problem solving

  LigerUI is a series of control groups developed based on jQuery, including common UI controls such as forms, layouts, tables, etc. Using LigerUI can quickly create a unified interface effect. 

  Its view is concise and clear, the operation is relatively simple, the data is transmitted in json format, and it has a good grid table processing ability. I have used this kind of plug-in in my previous work, and I feel that the effect is good, but the information that can be found is relatively small.

1. After changing the number of pages displayed (pageSize), query again, the actual number of displayed pages per page does not change, it is still the original value.

Problem positioning:
page:1,
newPage:0,
pageSize:10,
isChecked: f_isChecked,  
onCheckRow: f_onCheckRow, onCheckAllRow
: f_onCheckAllRow,
checkbox: true,
enabledEdit: true

The number of pages displayed will still be calculated according to the default 10, and the number of displayed pages in the bottom corner will not be refreshed synchronously.

Solution
var sels=document.getElementsByName('rp');
for(i=0;i<sels.length;i++)
var pageSize=sels[0].value;
if(pageSize=="undefined"){
    pageSize= 10;
}
grid =
$("#maingrid").ligerGrid({
        columns: [
        ...
        page:1,
        newPage:0,
        pageSize:pageSize,
        isChecked: f_isChecked,  
        onCheckRow: f_onCheckRow,
        onCheckAllRow: f_onCheckAllRow,
        checkbox: true,
        enabledEdit: true

2. LigerUI closes automatic page refresh and closes
parent.window.queryData();//Refresh the page
parent.$(".l-dialog,.l-window-mask").remove(); //Close the popup layer/ /parent.$.ligerDialog.close(); //Close the page. In some cases, an error is reported, so don't write it.

3. Add a button to the table

grid =
$("#maingrid").ligerGrid({
        columns: [
        { display: 'operation', name: 'OPTION', align: 'center', width: 130 ,
        render: function (item){
            
return "<input type='button' onclick='but_Modify(\""+item. A+"\",\""+item.B"\")' value='Modify'>;";           
        }
        },
        { display: 'Workplace name', name: 'DEPTNAME', align: 'center', width : 200 ,hide:false },

4. Click the row, the multi-select box is not selected.
enabledEdit: true,//Click the line to not check


  each open source project has its own unique charm. We use it for free, and we will improve it with a grateful heart and make it more beautiful.