jQuery.FlexiGrid the use of summary

sponsored links
After a FlexiGrid of large-scale use, and refined from time to time under its code, to her understanding of a certain temperament, is the time to do the summary.

1, FlexiGrid downloads

1, original code

Paulo P. Marinas right FlexiGrid recently made changes to adapt to jQuery 1.4.2. Listed under the authors looked at the characteristics of the table, the table is very long, but compared with the past, but no increase in any new features, so the version number without modification, is still 1.0b3.
One mentioned is noteworthy that flexAddData method has been rewritten and the performance is greatly improved, not test, to see the results. Editable features are the increase in long-term plan is still, this is a little less tangled.

To elaborate here, this is still only a summary of the old.

Download: http://code.google.com/p/flexigrid/downloads/list

2, functional extensions to the optimized version of xuanye (http://www.cnblogs.com/xuanye) modified version of, well, very strong.

Download 1: http://code.google.com/p/xjplugin/downloads/list

Download 2: http://xjplugin.googlecode.com/svn/trunk/ControlsSample/Javascripts/Plugins/jquery.flexigrid.js

2, configuration parameters (options) Description

The default parameter setting code:

// apply default properties
p = $.extend({
    height: 200,
    //default height
    width: 'auto',
    //auto width
    striped: true,
    //apply odd even stripes
    novstripe: false,
    minwidth: 30,
    //min width of columns
    minheight: 80,
    //min height of columns
    resizable: true,
    //resizable table
    url: false,
    //ajax url
    method: 'POST',
    // data sending method
    dataType: 'xml',
    // type of data loaded
    errormsg: 'Connection Error',
    usepager: false,
    //
    nowrap: true,
    //
    page: 1,
    //current page
    total: 1,
    //total pages
    useRp: true,
    //use the results per page select box
    rp: 15,
    // results per page
    rpOptions: [10, 15, 20, 25, 40],
    title: false,
    pagestat: 'Displaying {from} to {to} of {total} items',
    procmsg: 'Processing, please wait ...',
    query: '',
    qtype: '',
    nomsg: 'No items',
    minColToggle: 1,
    //minimum allowed column to be hidden
    showToggleBtn: true,
    //show or hide column toggle popup
    hideOnSubmit: true,
    autoload: true,
    blockOpacity: 0.5,
    onToggleCol: false,
    onChangeSort: false,
    onSuccess: false,
    onSubmit: false
    // using a custom populate function

},
p);

Parameter Description:

height: 200, / / flexigrid plug-in height, measured in px
width: 'auto', / / width value, auto said that according to the width of each column automatically calculates the
striped: true, / / whether to display stripe effect, the default is the parity in the form of interactive
novstripe: false, / / not used, I do not know how to use, need for analysis of the source code
minwidth: 30, / / minimum width of the column
minheight: 80, / / minimum height of the column
resizable: true, / / if scalable
url: false, / / ajax mode url address of the corresponding
method: 'POST', / / data transmission mode
dataType: 'xml', / / type of data load
errormsg: 'Connection Error', / / error messages
usepager: false, / / whether or Pagination
nowrap: true, / / it does not wrap
page: 1, / / Default Page
total: 1, / / Total number of pages
useRp: true, / / whether it can dynamically set the number of results per page
rp: 15, / / default number of results per page
rpOptions: [10,15,20,25,40], / / option set by the number of results per page
title: false, / / title is set
pagestat: 'Displaying (from) to (to) of (total) items', / / display paging status
procmsg: 'Processing, please wait ...', / / being processed tips
query:'',// search query terms submitted to the server
qtype:'',// categories of search queries submitted to the server
nomsg: 'No items', / / no results tips
minColToggle: 1, / / whether to allow hiding out
showToggleBtn: true, / / show or hide the data table
hideOnSubmit: true, / / hide the submission of
autoload: true, / / Auto-Load
blockOpacity: 0.5, / / transparency settings
onToggleCol: false, / / when the line when converting between
onChangeSort: false, / / when the sort changes
onSuccess: false, / / successful implementation of the
onSubmit: false / / trigger custom events populate the submission of

3, use the steps to explain

1, in the <head> added the quote from the paper identifies the code (note the file storage path):

< link rel = "stylesheet"href = "flexigrid/flexigrid.css"type = "text/css" > </link> 
   <script type="text/javascript " src="jquery / jquery.1.3.2.mini.js "></script> 
   <script type="text / javascript " src="flexigrid / flexigrid.js "></script>" 


Add a tool button icon style:

< style type = "text/css" > 
/* ===  Increased tool button icon style    ====*/
.flexigrid div.fbutton.add
 {
    padding - left: 20px;
    background: url(images / row_add.gif) no - repeat center left;

}

.flexigrid div.fbutton.edit
 {
    padding - left: 20px;
    background: url(images / row_edit.gif) no - repeat center left;

}

.flexigrid div.fbutton.delete
 {
    padding - left: 20px;
    background: url(images / row_delete.gif) no - repeat center left;

}

.flexigrid div.fbutton.reset
 {
    padding - left: 20px;
    background: url(images / user_reset.gif) no - repeat center left;

}

.flexigrid div.fbutton.excel
 {
    padding - left: 20px;
    background: url(images / excel.gif) no - repeat center left;

}
 < /style>/


In order to facilitate future use, the above styles can be added to the flexigrid.css this file.

2, in the <body> identification have added code:

<table></table> 


If you want to add / edit data, but also to join such as the following HTML code:

 <div>
   <form name="dialog_form" action="">
     <table width="100%">
      <tr>
        <td width="30%"> Action badge  :</td>
        <td width="70%">
          <input name="username" type="text" />* Eight-digit number  
          <input name="user_id" type="hidden" />
        </td>
      </tr>
      <tr>
        <td> Real name  :</td>
        <td><input name="name" type="text" /></td>
      </tr>
      <tr>
        <td> City and County agencies  :</td>
        <td>{{$input.html_sxjg}}</td>
      </tr>
      <tr>
        <td> Business organizations  :</td>
        <td>{{$input.html_yyjg}}</td>
      </tr>
      <tr>
        <td> Assign roles  :</td>
        <td>{{$input.html_auth}}</td>
      </tr>
    </table>
   </form>
</div>


3, in the <head> write JavaScript code that identifies where

Code Example:

< script type = "text/javascript" > 
$(function() {

    //  The form of text input bar bound inputtxt style class  
    $('#dialog_form input:text').addClass('inputtxt');

    $("#grid").flexigrid({
        url: '{{url controller='Ghgl ' action='GetPagerData '}}',
        //url:'index.php?ctl=User&act=GetJsonData',
        dataType: 'json',
        colModel: 
        [
        {
            display: ' Ordinal number  ',
            name: 'seq',
            width: 40,
            sortable: false,
            align: 'center'
        },
        {
            display: '#ID',
            name: 'user_id',
            width: 40,
            sortable: true,
            align: 'left',
            hide: true
        },
        {
            display: ' Action badge  ',
            name: 'username',
            width: 70,
            sortable: true,
            align: 'left'
        },
        {
            display: ' Real name  ',
            name: 'name',
            width: 60,
            sortable: false,
            align: 'left'
        },
        {
            display: ' Assign roles  ',
            name: 'role',
            width: 80,
            sortable: false,
            align: 'left'
        },
        {
            display: ' Exhibiting units  ',
            name: 'sxmc',
            width: 120,
            sortable: false,
            align: 'left'
        },
        {
            display: ' Business organizations  ',
            name: 'jgmc',
            width: 120,
            sortable: true,
            align: 'left'
        },
        {
            display: ' Badge creation time  ',
            name: 'created',
            width: 110,
            sortable: false,
            align: 'left',
            hide: false
        },
        {
            display: ' Password update time  ',
            name: 'pwdupdated',
            width: 110,
            sortable: false,
            align: 'left',
            hide: false
        }
        ],
        searchitems: 
        [
        {
            display: ' User data  ',
            name: 'username'
        },
        {
            display: ' User name  ',
            name: 'name',
            isdefault: true
        },
        {
            display: ' Exhibiting units  ',
            name: 'sxmc'
        },
        {
            display: ' Business organizations  ',
            name: 'jgmc'
        }
        ],
        sortname: "sx_id, jg_id, username",
        sortorder: "DESC",
        title: '<font color="#336699"> Operation badge, maintenance  </font>',
        usepager: true,
        useRp: true,
        rp: 15,
        showTableToggleBtn: false,
        width: 600,
        height: 400,
        striped: true,
         
        //onSubmit: addFormData,
        pagestat: ' The currently displayed record   {from}  To   {to}  Bar, total   {total}  Bar  ',
        procmsg: ' Processing, please wait   ...',
        nomsg: ' Cannot find the data that matches the criteria  !',
        errormsg: ' Connection failed in the background  !',
        buttons: 
        [
        {
            name: ' Add  ',
            bclass: 'add',
            onpress: opt
        },
        {
            name: ' Modify  ',
            bclass: 'edit',
            onpress: opt
        },
        {
            name: ' Delete  ',
            bclass: 'delete',
            onpress: opt
        },
        {
            separator: true
        },
        {
            name: ' Export  EXCEL',
            bclass: 'excel',
            onpress: opt
        }
        ]

    });

    /**
     *  Add/Modify dialog box  
     */
    $('#dialog_div').dialog({
        hide: '',
        // Click on the hide, if Cancel is set to  true, You cannot close popups  . 
        autoOpen: false,
        width: 340,
        //height:230, 
        modal: true,
        // Mont layer   
        //title:' Add/modify information units  ', 
        overlay: {
            opacity: 0.5,
            background: "black"

        },
        buttons: {
            ' Shut down  ': function() {
                $(this).dialog("close");
            },
            ' Reset  ': function() {
                $(this).children('form')[0].reset();
            },
            ' Submit  ': function() {
                addUpdate();
            }

        }

    });

    /**
     *  Click on the tool bar button operation  
     */
    function opt(com, grid) {
        switch (com) {
            case ' Add  ':
            $('.ui-dialog-title').html('<font color="#336699"> Add action badge  </font>');
            $('#dialog_form input[name=user_id]')[0].value = '';
            $('#dialog_div').dialog('open').children('form')[0].reset();
            break;
            case ' Modify  ':
            $('.ui-dialog-title').html('<font color="#336699"> Modify the action badge  </font>');
            selected_count = $('.trSelected', grid).length;
            if (selected_count == 0) {
                JAlert(' Please select a record. ', ' message  ');
                return false;

            }
            if (selected_count > 1) {
                jAlert(' Sorry I can only modify one record. ', ' message  ');
                return false;

            }

            //  Read the table of the selected row data  
            var data = new Array();
            $('.trSelected td', grid).each(function(i) {
                data[i] = $(this).children('div').text();

            });
            //alert(data[1] + ' ' + data[2] + ' ' + data[3]);

//  Initialization of the editing data Interfacial data  
            $('#dialog_form input[name=user_id]')[0].value = data[1];
            $('#dialog_form input[name=username]')[0].value = data[2];
            $('#dialog_form input[name=name]')[0].value = data[3];
            $.ajax({
                url: '{{url controller='Ghgl ' action='GetUpdData '}}',
                data: {
                    user_id: data[1]
                },
                type: 'POST',
                dataType: 'json',
                success: function(data) {
                    //alert($('#jg_id').options);
                    var jg_slt = $('#dialog_form #jg_id option');
                    var jg_len = jg_slt.length;
                    if (jg_len > 0) {
                        setSelected(jg_slt, data.jg_id);

                    }

                    var auth_radio = $('#dialog_form input:radio');
                    //alert(auth_radio.length);
                    if (auth_radio.length > 0) {
                        setChecked(auth_radio, data.auth);

                    }

                }

            });
            $('#dialog_div').dialog('open');
            break;
            case ' Delete  ':
            selected_count = $('.trSelected', grid).length;
            if (selected_count == 0) {
                jAlert(' Please select a record. ', ' message  ');
                return false;

            }
            if (selected_count > 1) {
                jAlert(' Sorry every time you can only delete a record. ', ' message  ');
                return false;

            }
            var names = '';
            $('.trSelected td:nth-child(4) div', grid).each(function(i) {
                if (i) {
                    names += ',';

                }
                names += $(this).text();

            });
            var ids = '';
            $('.trSelected td:nth-child(2) div', grid).each(function(i) {
                if (i) {
                    ids += ',';

                }
                ids += $(this).text();

            })
            /*
                if (ids == '') {
                    alert(' Please choose to delete the record, select the allow multiple records at the same time  .');
                    return;
                }*/
            /*
                if(confirm(" To confirm the deletion  [" + names + "] User data?  ?")){ 
                    del(ids); 
                }*/
            jConfirm(" To confirm the deletion  [<font color='#FF0000'>" + names + "</font>] User badges? ', ' delete confirmation  ', 
            function(btn) {
                if (btn) {
                    del(ids);
                }

            });
            break;
            case ' Export  EXCEL':
            document.location.href = "{{url controller='Ghgl' action='Export'}}";
            break;

        }

    }

    /**
     *  Add a record  
     */
    function addUpdate() {
        $('#dialog_form').ajaxSubmit({
            //$('#dialog_form').ajaxform({
            url: "{{url controller='Ghgl' action='Save'}}",
            type: 'POST',
            dataType: 'json',
            resetForm: true,
            success: function(data) {
                if (data.success) {
                    $('#grid').flexReload();
                    $('#dialog_div').dialog('close');

                } else {
                    jAlert(data.msg, ' Message prompt  ');
                    return false;

                }

            },
            error: function() {}

        });

    };

    /**
     *  Delete records  
     */
    function del(ids) {
        $.ajax({
            url: "{{url controller='Ghgl' action='Del'}}",
            data: {
                ids: ids
            },
            type: 'POST',
            dataType: 'json',
            success: function(data) {
                if (data.success) {
                    $('#grid').flexReload();

                } else {
                    jAlert(data.msg, ' Message prompt  ');
                    return false;

                }

            }

        });

    };

    /**
     *  Reset password  
     */
    function reset(id) {
        $.ajax({
            url: "{{url controller='Ghgl' action='Reset'}}",
            data: {
                user_id: id
            },
            type: 'POST',
            dataType: 'json',
            success: function(data) {
                if (data.success) {
                    jAlert(data.msg, ' Message prompt  ');
                    return;

                } else {
                    jAlert(data.msg, ' Error prompt  ');
                    return false;

                }

            },
            error: function() {}

        });

    };

    //  According to the value initializes the drop-down list box  
    function setSelected(slt, value) {
        for (var i = 0; i < slt.length; i++) {
            if (slt[i].value == value) {
                slt[i].selected = true;

            } else {
                slt[i].selected = false;

            }

        }

    };

    //  According to the value to initialize the radio buttons  
    function setChecked(slt, value) {
        for (var i = 0; i < slt.length; i++) {
            if (slt[i].value == value) {
                slt[i].checked = true;

            } else {
                slt[i].checked = false;

            }

        }

    };

});
 < /script>/


One code segment:

//  Read the table of the selected row data  
var data = new Array();
$('.trSelected td', grid).each(function(i) {
  data[i] = $(this).children('div').text();
});
//alert(data[1] + ' ' + data[2] + ' ' + data[3]);

To read the table the selected rows of data, through the $ ( '. TrSelected td', grid) to read.

var ids = '';  
$('.trSelected td:nth-child(2) div',grid).each(function(i){  
  if(i){
        ids += ',';
  }
      ids += $(this).text();  
})

To read the selected row cell data source, through the :$('. trSelected td: nth-child (2) div ', grid) to read, if you allow multiple selections, read back is an array of values. NOTE: td: nth-child (2) the meaning of the second row for the selected cells, because: nth-child (index) the index value from 1 onwards.

FlexiGrid.options Parameter description:

1, colModel: column definition array is used to set the data grid header and data display format.

Parameter Description:

display: Set list header name, you must set up, type: string, default value: None.
name: field name, you must set, type: string, default value: None. Note: If the dataType parameter is set to json (dataType: 'json'), then the name value must correspond with the return of the element name.
width: Set the column width, must be set, type: Value (in pixels px), the default value: None.
sortable: it can be sorted, type: boolen, the default value: false, do not sort.
process: handling procedures, type:
function, can be formatted cell.
hide: Set the column is hidden, type: boolen, the default value: false
align: Set column data alignment, there are three parameters: left, center, right.

Code Example:

colModel: 
[
{
    display: ' Ordinal number  ',
    name: 'seq',
    width: 40,
    sortable: false,
    align: 'center'
},
{
    display: '#ID',
    name: 'user_id',
    width: 40,
    sortable: true,
    align: 'left',
    hide: true
},
{
    display: ' Action badge  ',
    name: 'username',
    width: 70,
    sortable: true,
    align: 'left'
},
{
    display: ' Real name  ',
    name: 'name',
    width: 60,
    sortable: false,
    align: 'left'
},
{
    display: ' Assign roles  ',
    name: 'role',
    width: 80,
    sortable: false,
    align: 'left'
},
{
    display: ' Exhibiting units  ',
    name: 'sxmc',
    width: 120,
    sortable: false,
    align: 'left'
},
{
    display: ' Business organizations  ',
    name: 'jgmc',
    width: 120,
    sortable: true,
    align: 'left'
},
{
    display: ' Badge creation time  ',
    name: 'created',
    width: 110,
    sortable: false,
    align: 'left',
    hide: false
},
{
    display: ' Password update time  ',
    name: 'pwdupdated',
    width: 110,
    sortable: false,
    align: 'left',
    hide: false
}
],


2, buttons: Toolbar Button definition of an array, used to set the data grid toolbar button.

Parameter Description:

name: Botton's identity, type: string, default value: None
bclass: style, type: boolen, the default value: None
onpress: When the button is clicked, the event is triggered when the button to accept the name as the first parameter, Grid for the second parameter of a function
separator: whether to show a separator

Code Example:

buttons: 
[
{
    name: ' Add  ',
    bclass: 'add',
    onpress: opt
},
{
    name: ' Modify  ',
    bclass: 'edit',
    onpress: opt
},
{
    name: ' Delete  ',
    bclass: 'delete',
    onpress: opt
},
{
    separator: true
},
{
    name: ' Export  EXCEL',
    bclass: 'excel',
    onpress: opt
}
]


Of which:

name: Set the button text
separator: Set whether to display separator
bclass: Set the button style, example:

< style > 
.flexigrid div.fbutton.add
 {
    background: url(.. / lib / jquery / flexigrid / css / images / row_add.gif) no - repeat center left;

}

.flexigrid div.fbutton.edit
 {
    background: url(.. / lib / jquery / flexigrid / css / images / row_edit.gif) no - repeat center left;

}

.flexigrid div.fbutton.delete
 {
    background: url(.. / lib / jquery / flexigrid / css / images / row_delete.gif) no - repeat center left;

}

.flexigrid div.fbutton.reset
 {
    background: url(.. / images / user_reset.gif) no - repeat center left;

}

.flexigrid div.fbutton.excel
 {
    background: url(.. / images / excel.gif) no - repeat center left;

}
 < /style>


onpress: click the button to trigger the event, accept button's name as the first parameter, grid for the second parameter of a function.

Sample Code:

/**
     *  Click on the tool bar button operation  
     */
function opt(com, grid) {
    switch (com) {
        case ' Add  ':
        ...
        break;
        case ' Modify  ':
        ...
        break;
        case ' Delete  ':
        ...
        break;
        case ' Export  EXCEL':
        ...
        break;

    }

}


3, background PHP code (json):

Taken from FlexiGrid latest version of the sample code:

function runSQL($rsql) {

    $connect = mysql_connect($hostname,$username,$password) or die ("Error: could not connect to database");
    $db = mysql_select_db($dbname);

    $result = mysql_query($rsql) or die ('test');
    return $result;
    mysql_close($connect);
}

function countRec($fname,$tname) {
    $sql = "SELECT count($fname) FROM $tname ";
    $result = runSQL($sql);
    while ($row = mysql_fetch_array($result)) {
    return $row[0];
    }
}

$page = $_POST['page'];
$rp = $_POST['rp'];
$sortname = $_POST['sortname'];
$sortorder = $_POST['sortorder'];

if (!$sortname) $sortname = 'name';
if (!$sortorder) $sortorder = 'desc';

$sort = "ORDER BY $sortname $sortorder";

if (!$page) $page = 1;
if (!$rp) $rp = 10;

$start = (($page-1) * $rp);

$limit = "LIMIT $start, $rp";

$sql = "SELECT iso,name,printable_name,iso3,numcode FROM country $sort $limit";
$result = runSQL($sql);

$total = countRec('iso','country');

//  Generate JSON data  
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/x-json");
$json = "";
$json .= "{\n";
$json .= "page: $page,\n";
$json .= "total: $total,\n";
$json .= "rows: [";
$rc = false;
while ($row = mysql_fetch_array($result)) {
    if ($rc) $json .= ",";
    $json .= "\n{";
    $json .= "id:'".$row['iso']."',";
    $json .= "cell:['".$row['iso']."'";
    $json .= ",'".addslashes($row['name'])."'";
    $json .= ",'".addslashes($row['printable_name'])."'";
    $json .= ",'".addslashes($row['iso3'])."'";
    $json .= ",'".addslashes($row['numcode'])."']";
    $json .= "}";
    $rc = true;
}
$json .= "]\n";
$json .= "}";
echo $json;


I have the background code:

/**
     *  Returns the JSON paged data reception  
     *
     */
    function actionGetPagerData()
    {
        $user = $this->user;

        $page = ($_POST['page']) ? $_POST['page'] : 1;
        $limit = ($_POST['rp'])?$_POST['rp'] : 15;
        $sortname = ($_POST['sortname']) ? $_POST['sortname'] : 'username';
        $sortorder = ($_POST['sortorder']) ? $_POST['sortorder'] : 'DESC';

        $sort = "$sortname $sortorder";
        $offset = ($page - 1) * $limit;

        $query = ($_POST['query']) ? trim($_POST['query']) : '';
        $qtype = ($_POST['qtype']) ? trim($_POST['qtype']) : '';
        if ($qtype == 'name' || $qtype == 'sxmc') {
            $query = mb_convert_encoding($query, 'GB2312', 'utf-8');
        }

        if ($user['RBAC_ROLES'][0] == 'SYSTEM_ADMIN') {
            $conditions = array(
                array('auth', 1, '=', 'OR'),
                array('auth', 2, '='),
            );
        } elseif ($user['RBAC_ROLES'][0] == 'POWER_USER') {
            $conditions = array(
                array('sx_id', $user['SXID'], '=', 'AND'),
                array('auth', 3, '=', 'OR'),
                array('sx_id', $user['SXID'], '=', 'AND'),
                array('auth', 4, '='),
            );
        }

        if ($query  && $user['RBAC_ROLES'][0] == 'POWER_USER') {
            $conditions = array(
                array('sx_id', $user['SXID'], '=', 'AND'),
                array($qtype, $query, '=')
            );
        }
        if ($qtype == 'name' && $query != ''  && $user['RBAC_ROLES'][0] == 'POWER_USER') {
            $conditions = array(
                array('sx_id', $user['SXID'], '=', 'AND'),
                array($qtype, '%' . $query . '%', 'LIKE')
            );
        }
        if ($qtype == 'sxmc' && $query != '' && $user['RBAC_ROLES'][0] == 'SYSTEM_ADMIN') {
            $cxtj = array(
                array('sxmc', '%' . $query . '%', 'LIKE')
            );
            $sxjg = & FLEA::getSingleton('Table_Sxjg');
            $row = $sxjg->find($cxtj);

            $conditions = array(
                array('sx_id', $row['SXID'], '=', 'AND'),
                array('auth', 1, '=', 'OR'),
                array('sx_id', $row['SXID'], '=', 'AND'),
                array('auth', 2, '='),
            );
        }
        if ($qtype == 'jgmc' && $query != '' && $user['RBAC_ROLES'][0] == 'POWER_USER') {
            $cxtj = array(
                array('sx_id', $this->user['SXID'], '=', 'AND'),
                array('jgmc', '%' . $query . '%', 'LIKE')
            );
            $tblYyjg = & FLEA::getSingleton('Table_Yyjg');
            $row = $tblYyjg->find($cxtj);
            $conditions = array(
                array('sx_id', $this->user['SXID'], '=', 'AND'),
                array('jg_id', $row['jg_id'], '=')
            );
        }

        //$conditions = null;
        $this->_tblUsers->enableLinks();
        $rows = $this->_tblUsers->findAll($conditions, $sort, array($limit, $offset));
        $rs = $this->_tblUsers->findAll($conditions);
        $total = count($rs);
        $json = "";
        $json .= "{\n";
        $json .= "page: $page,\n";
        $json .= "total: $total,\n";
        $json .= "rows: [";
        $rc = false;
        $i = 1;
        foreach ($rows as $row) {
            if ($rc) $json .= ",";
            $json .= "\n{";
            $json .= "user_id:'".$row['user_id']."',";
            $json .= "cell:['".$i."'";
            $json .= ",'".$row['user_id']."'";
            $json .= ",'".$row['username']."'";
            $json .= ",'".$row['name']."'";
            $json .= ",'".$row['roles'][0]['rolename_cn']."'";
            $json .= ",'".$row['sxjg']['sxmc']."'";
            $json .= ",'".addslashes($row['yyjg']['jgmc'])."'";
            $json .= ",'".$row['created']."'";
            //$json .= ",'".$row['updated']."']";
            $json .= ",'".$row['pwdupdated']."']";
            $json .= "}";
            $rc = true;
            $i++;
        }
        $json .= "]\n";
        $json .= "}";
        echo $json;
        exit;
    }


4, function optimization Expanded description

Functional optimization of extended version of the changes:

1, ext modified imitation of the skin, the interface is more beautiful;
2 to optimize the rendering form code, the speed increased by 60%;
3, an increase of display checkbox column function;
4, in order to facilitate the processing of row data, an increase of rows of data binding capabilities.

options add parameters:

qop: "Eq", // Search operators  
showcheckbox: false, // Whether in the first column is added  checkbox
rowhandler: false, // In the resulting row binding events, such as double-click  , Right, etc.  
rowbinddata: false, //  If the bound data on the row  
extParam: {}, //  The extended dynamic registration of external parameter to the grid, such as a custom query, and so on  
onrowchecked: false, // checkbox Select the state change event is triggered when the  
gridClass: "bbit-grid" // Binding style  


buttons Added parameters:

btnText: Set the text tool button to add the original as displayname, I have here changed btnText.

Example:

buttons:
[
    {name: 'Add', btnText: " Add new  ", bclass: 'add', onpress: function(Add, grid){alert(' This is a new operation  .');return false;}},
    {name: 'Edit', btnText: " Modify  ", bclass: 'edit', onpress: ''},
    {name: 'Delete', btnText: " Delete  ", bclass: 'delete', onpress: ''},
    {separator: true},
    {name: 'Export', btnText: " Export  Excel", bclass: 'excel', onpress: ''}
]


New Methods:

$("#grid").getCheckedRows();  You can obtain the value of the selected row, there is record of  ID Array  .


Function realization Example:

1, the query layout can be set up on their own, finished calling method can refresh the grid, similar to the following:

var p = { extParam: [
    { name: "stuName", value: $("#selectinput").val() },
    { name: "stuId", value: $("#selectStuId").val() },
    { name: "stuNo", value: $("#selectNo").val() },
    { name: "stuGrade", value: $("#selectGrade").val() },
    { name: "SID", value: $("#sugvalue").val() },
    { name: "Sname", value: $("#sugname").val() },
    { name: "Sgust", value: $("#suggust").val() }
    ]
};
$("#grid").flexOptions(p).flexReload();

2, grid there are some records have been selected, how do I check them out from the database when set to select the checkbox in front of?

First of all whether the selected value as the list of columns and other data with the check to come back once,
Then again Flexigrid in rowhandler the definition of a function parameter as follows:

rowhandler: InitGridCheck,

Function implementation:

function InitGridCheck(tr) {
    var ch = $.browser.msie ? tr.ch : target.getAttribute("ch");
    var cell = ch.split("_FG$SP_");
    if(cell[7] != 1){return;}
    var chkb = $(tr).find(":checkbox");
    if (chkb.length>0) {
        chkb[0].checked = true;
        chkb[0].defaultChecked = true;
        $(tr).addClass('trSelected');
    }
}


Debug:

As xuanye modified version of the code to show when checkbox column (showcheckbox: false), the presence can not click the table row can not be selected rows of the bug, because if you can not select rows, you can not edit, delete and other operations.

Open jquery.flexigrid.js file, find the 735 line, adding table row click event code:

$('tbody tr', g.bDiv).each(
function() {
    //  Increase click row processing code  (modified by hegz 2009/03/29)
    $(this)
    .click(
    function(e)
    {
        var obj = (e.target || e.srcElement);
        if (obj.href || obj.type) return true;
        if ($(this).hasClass('trSelected')) {
            $(this).removeClass('trSelected');
            if (p.showcheckbox)
            $("input.itemchk", this)[0].checked = false;

        } else {
            $(this).addClass('trSelected');
            if (p.showcheckbox)
            $("input.itemchk", this)[0].checked = true;

        }
        if (p.onrowchecked) p.onrowchecked.call(this);
        if (p.singleSelect) $(this).siblings().removeClass('trSelected');

    }
    );
    // modified end
    ...


In fact, the original code is there such a code, but xuanye revised canceled.

Original FlexiGrid Code:

addRowProp: function() {
    $('tbody tr', g.bDiv).each(function() {
        $(this).click(function(e) {
            var obj = (e.target || e.srcElement);
            if (obj.href || obj.type) return true;
            $(this).toggleClass('trSelected');
            if (p.singleSelect) $(this).siblings().removeClass('trSelected')
        }).mousedown(function(e) {
            if (e.shiftKey) {
                $(this).toggleClass('trSelected');
                g.multisel = true;
                this.focus();
                $(g.gDiv).noSelect()
            }
        }).mouseup(function() {
            if (g.multisel) {
                g.multisel = false;
                $(g.gDiv).noSelect(false)
            }
        }).hover(function(e) {
            if (g.multisel) {
                $(this).toggleClass('trSelected')
            }
        },
        function() {});
        if ($.browser.msie && $.browser.version < 7.0) {
            $(this).hover(function() {
                $(this).addClass('trOver')
            },
            function() {
                $(this).removeClass('trOver')
            })
        }
    })
},

(Today, through the exchange of xuanye brother, this is not a bug, just by right-click menu support, and now the latest code that has supported this feature, I might have white busy for a, ha ha.)

V. Conclusion

Paulo P. Marinas of the head is marked committed to building functional, easy to use lightweight grid. He made sure in the future to add new functions, the code is compressed, the size of no more than 20K, this is indeed admirable. But it has plans to increase the functionality of Editable never been able to achieve, it makes me so disappointed, or other prawn xuanye in the near future to expand to achieve this functionality will resort.

6, reference

1, the official Web site (http://www.flexigrid.info/), and now can not be opened.
2, based on jQuery in GridView-Flexigrid (2) - to expand and repair (http://www.cnblogs.com/xuanye/archive/2009/11/08/Xuanye_jQuery_FlexiGrid_Demo.html)
3, based on jQuery in GridView-FlexiGrid the use and transformation of (1) - how to use the complete parameter description (http://www.cnblogs.com/xuanye/archive/2009/11/04/Xuanye_jQuery_FlexiGrid.html)
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb
Tags:

Related Posts of jQuery.FlexiGrid the use of summary

  • jQuery.FlexiGrid the use of summary

    After a FlexiGrid of large-scale use, and refined from time to time under its code, to her understanding of a certain temperament, is the time to do the summary. 1, FlexiGrid downloads 1, original code Paulo P. Marinas right FlexiGrid recently made change

  • jQuery.FlexiGrid Use Summary

    Through FlexiGrid are widely used, and refined from time to time under its code, a certain temperament to her understanding, is the time to take stock. 1, FlexiGrid download 1, original code Paulo P. Marinas on FlexiGrid recently made changes to adapt to

  • Learning jQuery Form plug-in datatables summary

    Learning jQuery Form plug-in datatables Summary (1) 2010-04-21 14:33 DataTables is the form of a jQuery plug-ins. This is a highly flexible tool, and gradually increase according to the foundation, which will increase the interaction of advanced control,

  • jquery extend the understanding and summary

    I read some blog and information online, with some knowledge and understanding Feeling described jquery extend the usage and Ext extend the usage is very different After reading the source code under the jquery extend, can not determine the actual me

  • jQuery function method commonly used summary

    Event handling ready (fn) Code: $ (Document). Ready (function () { / / Your code here ... }); Role: it can greatly improve the response speed of web applications. By using this method, the DOM ready to be read and manipulated, immediately call your bound

  • book-jQuery-based tutorial jquery

    Chapter 1 jQuery Getting Started 1 1.1 jQuery can do a 1.2 jQuery Why are they so good 2 1.3 The first jQuery documentation 3 1.3.1 download jQuery 3 1.3.2 Setting HTML Document 4 1.3.3 write jQuery code 6 1.4 Summary 9 Chapter 2 selectors - Get everythin

  • Data tables Flexigrid to use under the FleaPHP Introduction

    At present, the network could find, based on jQuery framework, feature more powerful grid there are two: jqGrid and Flexigrid. While these two forms is not Ext-Grid Form plug-in feature that powerful, but the basic applications to meet the day to day. jqG

  • Data table Flexigrid use in FleaPHP introduced under

    Currently, the network could find, based on jQuery framework, more robust grid function has two: jqGrid and Flexigrid. Although the two forms plug-in form is not Ext-Grid feature that powerful, but can satisfy the daily application. jqGrid use of stone in

  • Jquery Datagrid dynamic pages as well as CRUD (CRUD search)

    This is a jsp page to jquery Definition: back-end business view, download attachments. Have any suggestions please message us the truth, and then carrying out reconstruction! Database used is MySQL! <% @ Page language = "java" import = "

  • To the expansion of two functions flexigrid

    The first posts, like inappropriate, please share, brick, please pat This article describes one point I personally flexigrid some of the increased functionality. In a recent project, the need to use some data show a list of demands. Taking into accou

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries