How to dynamicly change the content of the table heading?

[amberfan]

Please see my demo below:
http://jsfiddle.net/LAgZx/178/

I put a check box in a column heading, and  I want to control the checkbox by clicking a button.
that is: when I click the button, the checkbox gets checked or unchecked.

but it doesn't work.

.......

I will use the check box to "select All" and "unselect All" the checkboxes in that column, but when I click to next page, the checkbox in the title remains checked, I'm really confused....

[amberfan]

Well, in my project, it looks like below:
I select All in first page:

and then i go to the next page


you can see that the checkbox in the heading remains checked.  I want to get it unchecked when the table  is refreshed ,but I can't control it.....

[paramvir]

You can control the header checkbox in refresh event.

Please see an implementation example below:

Code: [Select]

<script>
    var g_checked; //to save the state of header check box.
    function SelectAll(e) {
        //debugger;
        g_checked = e.checked;
        var $grid = $("#grid_array");
        var data = $grid.pqGrid("option", "dataModel.data");
        $(data).each(function (i, rowData) {
            rowData["state"] = g_checked ? true : false;
            $grid.pqGrid("selection",
                { type: 'row', method: (g_checked ? 'add' : 'remove'), rowIndx: i }
            );
        });       
        $grid.pqGrid("refresh");

        /*$("#grid_array").find('input[type=checkbox]').each(function () {
        this.checked = e.checked;
        });*/
    }

    $(function () {
        var data = [[1, 'Exxon Mobil', '339,938.0', '36,130.0'],
            [2, 'Wal-Mart Stores', '315,654.0', '11,231.0'],
[3, 'Royal Dutch Shell', '306,731.0', '25,311.0'],
[4, 'BP', '267,600.0', '22,341.0'],
[5, 'General Motors', '192,604.0', '-10,567.0'],
[6, 'Chevron', '189,481.0', '14,099.0'],
[7, 'DaimlerChrysler', '186,106.3', '3,536.3'],
[8, 'Toyota Motor', '185,805.0', '12,119.6'],
[9, 'Ford Motor', '177,210.0', '2,024.0'],
[10, 'ConocoPhillips', '166,683.0', '13,529.0'],
[11, 'General Electric', '157,153.0', '16,353.0'],
[12, 'Total', '152,360.7', '15,250.0'],
[13, 'ING Group', '138,235.3', '8,958.9'],
[14, 'Citigroup', '131,045.0', '24,589.0'],
[15, 'AXA', '129,839.2', '5,186.5'],
[16, 'Allianz', '121,406.0', '5,442.4'],
[17, 'Volkswagen', '118,376.6', '1,391.7'],
[18, 'Fortis', '112,351.4', '4,896.3'],
[19, 'Credit Agricole', '110,764.6', '7,434.3'],
[20, 'American Intl. Group', '108,905.0', '10,477.0']];


        var obj = {
            width: 700
            , height: 400
            , title: "ParamQuery Grid Example"
            , resizable: true
            , draggable: true
            , editable: false
            , selectionModel: { type: 'none' }
            , scrollModel: {autoFit:true}
        };
        obj.colModel = [{ title: "Rank", width: 100, dataType: "integer" },
        { title: "Company", width: 200, dataType: "string" },
        { title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right" },
        { title: "Profits ($ millions)", width: 150, dataType: "float", align: "right" },
        { title: "<input type='checkbox' class='header_chk' onclick='SelectAll(this);'   />", dataIndx: "state", width: 30, align: "center", sortable: false, type: 'checkBoxSelection', cls: 'checkboxColumn', resizable: false }
        ];
        obj.dataModel = { data: data };

        obj.refresh = function () {
            //debugger;
            if (g_checked) {
                $("input.header_chk").prop("checked", true);
            }
        }
        $("#grid_array").pqGrid(obj);

    });
   
</script>   
[code]

[amberfan]

HI Jr. Member
I really appreciate your help. I solved the problem now.
I read your code carefully and  and finally found  the key point,
That is:
you use the class selector
<input type='checkbox' class='header_chk' onclick='SelectAll(this);'   />"
 $("input.header_chk").prop("checked", true);
------------------------------------------------------------------------------------------------
And I use the ID selector
<input type='checkbox' id='chkall' onclick='checkAll(event,this)'/>
 $("#chkall").prop("checked", true);

your code takes effect and mine doesn't work.......

[BigMark]

hello ,请问版主,当你选中行以后,鼠标一滚动,会不会使原先选中的行,全部失去选择,就好像刷新了一样?