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 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)

分类:Web 时间:2010-03-30 人气:1089
本文关键词:
分享到:
blog comments powered by Disqus

相关文章

  • jQuery.FlexiGrid Use Summary 2010-03-30

    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 adap

  • JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件 2014-05-06

    dotNetFlexGrid是一款dotNet原生的异步表格控件,他的前身是Jquery FlexiGrid插件,我们重构了FlexiGrid的大部分Javascript代码,使其工作的更有效率,BUG更少:同时将其封装为dotNet控件,提供了简单易用的使用方式. dotNetFlexGrid是一款asp.net原生的异步表格控件,他的前身是Jquery FlexiGrid插件,我们重构了FlexiGrid的大部分Javascript代码,使其工作的更有效率,BUG更少:同时将其封装为dotN

  • JQuery FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(一)Ajax异步表格 2010-08-23

    作者: 华磊 发表于 2010-08-17 21:39 原文链接 阅读: 1939 评论: 38 dotNetFlexGrid-asp.net的异步表格控件 使用指南 简介 JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid是一款asp.net原生的异步表格控件,它的前身是Jquery FlexiGrid插件,我们重构了FlexiGrid的大部分Javascript代码,使其工作的更有效率,BUG更少:同时将其封装为asp.net 控件,提供了简单易用的使

  • 比Jquery FlexiGrid更好用 dotnetFlexGrid 1.2beta更新-增加展现模板模式(Grid中可以放编辑控件和任意Html内容了) 2010-08-23

    作者: 华磊 发表于 2010-08-19 21:29 原文链接 阅读: 126 评论: 0 累,先看效果,前两天提问表格内不能编辑的朋友开心了: 2010-8-19 v1.2 beta 修复快速查询时的键盘回车事件与控件外围事件的冲突的问题. 修复快速查询时设置正则表达式时可能导致的语法错误的问题. 数据提供方法DataHandler将不再强制要求与列的绑定顺序一致,现在通过返回的DataTable中的ColumnName自动绑定到合适的列,所以,请保证您的DataTable和控件中的列名一致

  • JQuery FlexiGrid的asp.net完美解决方案-dotNetFlexGrid使用指南(二)服务端查询.快速查询和Html模板 2010-08-23

    作者: 华磊 发表于 2010-08-20 16:08 原文链接 阅读: 972 评论: 10 开始之前,看下最新的v1.2版本有些什么 修复快速查询时的键盘回车事件与控件外围事件的冲突的问题. 修复快速查询时设置正则表达式时可能导致的语法错误的问题. 数据提供方法DataHandler将不再强制要求与列的绑定顺序一致,现在通过返回的DataTable中的ColumnName自动绑定到合适的列,所以,请保证您的DataTable和控件中的列名一致(区分大小写). 增加展现模板的功能,现InitC

  • [华磊随笔]善于使用工具(1)-使用IE8开发人员工具和FireBug分析Jquery FlexiGrid的实现原理 2010-08-23

    作者: 华磊 发表于 2010-08-20 22:27 原文链接 阅读: 706 评论: 6 [华磊随笔]善于使用工具(1)-使用IE8开发人员工具和FireBug分析Jquery FlexiGrid的实现原理 "工欲善其事,必先利其器" 当今Web开发,如何有效的提升用户操作体验已经越来越重要,以现在的技术而言,Javascript 操作dom和style是最有效的手段:Web开发不像Windows开发一样,往往要涉及到很多不同的技术和方向:同时,由于机制的原因和技术的分散,快速有效

  • jquery extend the understanding and summary 2010-10-09

    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 2011-05-23

    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 b

  • book-jQuery-based tutorial jquery 2008-06-02

    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 ever

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.117 (s). 12 q(s)