Jquery FlexGrid

最新推荐文章于 2018-06-26 14:49:38 发布
最新推荐文章于 2018-06-26 14:49:38 发布
阅读量1.3k 收藏
点赞数
文章标签： jquery class delete stylesheet div table
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        <title>Flexigrid</title> 
        <link rel="stylesheet" href="style.css" /> 
        <link rel="stylesheet" type="text/css" href="../css/flexigrid.pack.css" /> 
        <script type="text/javascript" 
                src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
        <script type="text/javascript" src="../js/flexigrid.pack.js"></script> 
</head> 
<body> 
        <img src="images/flash.png" alt="Flexigrid" width="960" height="483" 
                usemap="#Map" style="visibility: hidden" 
                onload="$(this).css({visibility:'visible',display:'none'}).fadeIn('slow');" 
                title="Flexigrid" border="0" /> 
        <map name="Map" id="Map"> 
                <area shape="rect" coords="671,29,853,72" href="https://code.google.com/p/flexigrid/downloads/list?q=label:Featured" 
                        alt="Download" /> 
        </map> 
 
        <h1 class="title" style="display: none"> 
                <strong>Flexigrid</strong> for jQuery<span 
                        style="font-size: 12px">by Paulo P. Marinas</span> 
        </h1> 
 
        <div class="update"> 
                <h2>What is it?</h2> 
 
                <p>Lightweight but rich data grid with resizable columns and a 
                        scrolling data to match the headers, plus an ability to connect to an 
                        xml based data source using Ajax to load the content.</p> 
                <p>Similar in concept with the Ext Grid only its pure jQuery love, 
                        which makes it light weight and follows the jQuery mantra of running 
                        with the least amount of configuration.</p> 
 
                <h3>Features</h3> 
                <ul> 
                        <li>Resizable columns</li> 
                        <li>Resizable height and width</li> 
                        <li>Sortable column headers</li> 
                        <li>Cool theme</li> 
                        <li>Can convert an ordinary table</li> 
                        <li>Ability to connect to an ajax data source (XML and JSON[new])</li> 
                        <li>Paging</li> 
                        <li>Show/hide columns</li> 
                        <li>Toolbar (new)</li> 
                        <li>Search (new)</li> 
                        <li>Accessible API</li> 
                        <li>Many more</li> 
                </ul> 
        </div> 
 
        <div class="update"> 
                <h2>FAQ</h2> 
                <ol> 
                        <li><div class="question">Where can I get support?</div> 
                                <div class="answer"> 
                                Bugs can be reported  
                                <a href="http://code.google.com/p/flexigrid/">http://code.google.com/p/flexigrid/</a>, and 
                                our fantastic community support is available at  
                                <a href="http://groups.google.com/group/flexigrid/">http://groups.google.com/group/flexigrid/</a>. 
                                </div> 
                        </li> 
                        <li> 
                                <div class="question">What's recently changed and what are the known bugs?</div> 
                                <div class="answer">Go to   
                                        <a href="http://code.google.com/p/flexigrid/issues/list"> 
                                        http://code.google.com/p/flexigrid/issues/list</a> 
                                </div> 
                        </li> 
                        <li><div class="question">What browsers does Flexigrid support?</div> 
                                <div class="answer">We support browsers IE6, Firefox 3, Opera 9, 
                                        Safari 3, Chrome 7 and greater.</div> 
                        </li> 
                        <li><div class="question">Where can I contribute code or suggest a feature?</div> 
                                <div class="answer"><a href="http://code.google.com/p/flexigrid/">http://code.google.com/p/flexigrid/</a></div> 
                        </li> 
                        <li><div class="question">Can I use it for personal or commercial projects/modify it/hack it?</div> 
                                <div class="answer">Absolutely! Just make sure you adhere to either the <a href="http://jquery.org/license">GPL or MIT licenses</a>.</div> 
                        </li> 
                        <li><div class="question">Can I connect this to a form or add Parameters?</div> 
                                <div class="answer">Sure, check out our <a href="sample.html">sample code</a>  
                                to learn how.</div> 
                        </li> 
                </ol> 
        </div> 
 
        <div class="update"> 
                <h2>Files you need</h2> 
                <ul> 
                        <li><a href="http://www.jquery.com">jQuery</a></li> 
                        <li><a href="https://code.google.com/p/flexigrid/downloads/list?q=label:Featured">FlexiGrid Plugin Pack(32K)</a> 
                                (includes the js, css, and images)</li> 
                </ul> 
        </div> 
 
        <div class="update"> 
                <h2>How to use</h2> 
                <p>Check out the examples below, or  
                <a href="http://code.google.com/p/flexigrid/source/">browse the source</a>.</p> 
        </div> 
 
        <h2>Example 1</h2> 
        <p> 
                The most basic example with the zero configuration, with a table 
                converted into flexigrid (<a href="#" 
                        onclick="$(this).parent().next().toggle(); return false;">Show 
                        sample code</a>) 
        </p> 
        <div class="code"> 
                <pre>$('.flexme').flexigrid();</pre> 
        </div> 
        <table class="flexme1"> 
                <thead> 
                        <tr> 
                                <th width="100">Col 1</th> 
                                <th width="100">Col 2</th> 
                                <th width="100">Col 3 is a long header name</th> 
                                <th width="300">Col 4</th> 
                        </tr> 
                </thead> 
                <tbody> 
                        <tr> 
                                <td>This is data 1 with overflowing content</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                </tbody> 
        </table> 
 
        <h2>Example 2</h2> 
        <p> 
                Table converted into flexigrid with height, and width set to auto, 
                stripes remove. (<a href="#" 
                        onclick="$(this).parent().next().toggle(); return false;">Show 
                        sample code</a>) 
        </p> 
        <div class="code"> 
                <pre>$('.flexme2').flexigrid({height:'auto',striped:false});</pre> 
        </div> 
        <table class="flexme2"> 
                <thead> 
                        <tr> 
                                <th width="100">Col 1</th> 
                                <th width="100">Col 2</th> 
                                <th width="100">Col 3 is a long header name</th> 
                                <th width="300">Col 4</th> 
                        </tr> 
                </thead> 
                <tbody> 
                        <tr> 
                                <td>This is data 1 with overflowing content</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                        <tr> 
                                <td>This is data 1</td> 
                                <td>This is data 2</td> 
                                <td>This is data 3</td> 
                                <td>This is data 4</td> 
                        </tr> 
                </tbody> 
        </table> 
 
        <h2>Example 3</h2> 
        <p> 
                Flexigrid with a dynamic data, paging, search, toolbar, and connected 
                to an JSON file. (<a href="#" 
                        onclick="$(this).parent().next().toggle(); return false;">Show 
                        sample code</a>) 
        </p> 
        <div class="code"> 
                <pre> 
$("#flex1").flexigrid({ 
        url: 'post2.php', 
        dataType: 'json', 
        colModel : [ 
                {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'}, 
                {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'}, 
                {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'}, 
                {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true}, 
                {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'} 
                ], 
        buttons : [ 
                {name: 'Add', bclass: 'add', onpress : test}, 
                {name: 'Delete', bclass: 'delete', onpress : test}, 
                {separator: true} 
                ], 
        searchitems : [ 
                {display: 'ISO', name : 'iso'}, 
                {display: 'Name', name : 'name', isdefault: true} 
                ], 
        sortname: "iso", 
        sortorder: "asc", 
        usepager: true, 
        title: 'Countries', 
        useRp: true, 
        rp: 15, 
        showTableToggleBtn: true, 
        width: 700, 
        height: 200 
});    
</pre> 
        </div> 
        <table class="flexme3" style="display: none"></table> 
 
        <script type="text/javascript"> 
                $('.flexme1').flexigrid(); 
                $('.flexme2').flexigrid({ 
                        height : 'auto', 
                        striped : false 
                }); 
 
                $(".flexme3").flexigrid({ 
                        url : 'post-xml.php', 
                        dataType : 'xml', 
                        colModel : [ { 
                                display : 'ISO', 
                                name : 'iso', 
                                width : 40, 
                                sortable : true, 
                                align : 'center' 
                        }, { 
                                display : 'Name', 
                                name : 'name', 
                                width : 180, 
                                sortable : true, 
                                align : 'left' 
                        }, { 
                                display : 'Printable Name', 
                                name : 'printable_name', 
                                width : 120, 
                                sortable : true, 
                                align : 'left' 
                        }, { 
                                display : 'ISO3', 
                                name : 'iso3', 
                                width : 130, 
                                sortable : true, 
                                align : 'left', 
                                hide : true 
                        }, { 
                                display : 'Number Code', 
                                name : 'numcode', 
                                width : 80, 
                                sortable : true, 
                                align : 'right' 
                        } ], 
                        buttons : [ { 
                                name : 'Add', 
                                bclass : 'add', 
                                onpress : test 
                        }, { 
                                name : 'Delete', 
                                bclass : 'delete', 
                                onpress : test 
                        }, { 
                                separator : true 
                        } ], 
                        searchitems : [ { 
                                display : 'ISO', 
                                name : 'iso' 
                        }, { 
                                display : 'Name', 
                                name : 'name', 
                                isdefault : true 
                        } ], 
                        sortname : "iso", 
                        sortorder : "asc", 
                        usepager : true, 
                        title : 'Countries', 
                        useRp : true, 
                        rp : 15, 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />          <title>Flexigrid</title>          <link rel="stylesheet" href="style.css" />          <link rel="stylesheet" type="text/css" href="../css/flexigrid.pack.css" />          <script type="text/javascript"                  src="http://code.jquery.com/jquery-1.5.2.min.js"></script>          <script type="text/javascript" src="../js/flexigrid.pack.js"></script>  </head>  <body>          <img src="images/flash.png" alt="Flexigrid" width="960" height="483"                  usemap="#Map" style="visibility: hidden"                  οnlοad="$(this).css({visibility:'visible',display:'none'}).fadeIn('slow');"                  title="Flexigrid" border="0" />          <map name="Map" id="Map">                  <area shape="rect" coords="671,29,853,72" href="https://code.google.com/p/flexigrid/downloads/list?q=label:Featured"                          alt="Download" />          </map>            <h1 class="title" style="display: none">                  <strong>Flexigrid</strong> for jQuery<span                          style="font-size: 12px">by Paulo P. Marinas</span>          </h1>            <div class="update">                  <h2>What is it?</h2>                    <p>Lightweight but rich data grid with resizable columns and a                          scrolling data to match the headers, plus an ability to connect to an                          xml based data source using Ajax to load the content.</p>                  <p>Similar in concept with the Ext Grid only its pure jQuery love,                          which makes it light weight and follows the jQuery mantra of running                          with the least amount of configuration.</p>                    <h3>Features</h3>                  <ul>                          <li>Resizable columns</li>                          <li>Resizable height and width</li>                          <li>Sortable column headers</li>                          <li>Cool theme</li>                          <li>Can convert an ordinary table</li>                          <li>Ability to connect to an ajax data source (XML and JSON[new])</li>                          <li>Paging</li>                          <li>Show/hide columns</li>                          <li>Toolbar (new)</li>                          <li>Search (new)</li>                          <li>Accessible API</li>                          <li>Many more</li>                  </ul>          </div>            <div class="update">                  <h2>FAQ</h2>                  <ol>                          <li><div class="question">Where can I get support?</div>                                  <div class="answer">                                  Bugs can be reported                                   <a href="http://code.google.com/p/flexigrid/">http://code.google.com/p/flexigrid/</a>, and                                  our fantastic community support is available at                                   <a href="http://groups.google.com/group/flexigrid/">http://groups.google.com/group/flexigrid/</a>.                                  </div>                          </li>                          <li>                                  <div class="question">What's recently changed and what are the known bugs?</div>                                  <div class="answer">Go to                                            <a href="http://code.google.com/p/flexigrid/issues/list">                                          http://code.google.com/p/flexigrid/issues/list</a>                                  </div>                          </li>                          <li><div class="question">What browsers does Flexigrid support?</div>                                  <div class="answer">We support browsers IE6, Firefox 3, Opera 9,                                          Safari 3, Chrome 7 and greater.</div>                          </li>                          <li><div class="question">Where can I contribute code or suggest a feature?</div>                                  <div class="answer"><a href="http://code.google.com/p/flexigrid/">http://code.google.com/p/flexigrid/</a></div>                          </li>                          <li><div class="question">Can I use it for personal or commercial projects/modify it/hack it?</div>                                  <div class="answer">Absolutely! Just make sure you adhere to either the <a href="http://jquery.org/license">GPL or MIT licenses</a>.</div>                          </li>                          <li><div class="question">Can I connect this to a form or add Parameters?</div>                                  <div class="answer">Sure, check out our <a href="sample.html">sample code</a>                                   to learn how.</div>                          </li>                  </ol>          </div>            <div class="update">                  <h2>Files you need</h2>                  <ul>                          <li><a href="http://www.jquery.com">jQuery</a></li>                          <li><a href="https://code.google.com/p/flexigrid/downloads/list?q=label:Featured">FlexiGrid Plugin Pack(32K)</a>                                  (includes the js, css, and images)</li>                  </ul>          </div>            <div class="update">                  <h2>How to use</h2>                  <p>Check out the examples below, or                   <a href="http://code.google.com/p/flexigrid/source/">browse the source</a>.</p>          </div>            <h2>Example 1</h2>          <p>                  The most basic example with the zero configuration, with a table                  converted into flexigrid (<a href="#"                          οnclick="$(this).parent().next().toggle(); return false;">Show                          sample code</a>)          </p>          <div class="code">                  <pre>$('.flexme').flexigrid();</pre>          </div>          <table class="flexme1">                  <thead>                          <tr>                                  <th width="100">Col 1</th>                                  <th width="100">Col 2</th>                                  <th width="100">Col 3 is a long header name</th>                                  <th width="300">Col 4</th>                          </tr>                  </thead>                  <tbody>                          <tr>                                  <td>This is data 1 with overflowing content</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                  </tbody>          </table>            <h2>Example 2</h2>          <p>                  Table converted into flexigrid with height, and width set to auto,                  stripes remove. (<a href="#"                          οnclick="$(this).parent().next().toggle(); return false;">Show                          sample code</a>)          </p>          <div class="code">                  <pre>$('.flexme2').flexigrid({height:'auto',striped:false});</pre>          </div>          <table class="flexme2">                  <thead>                          <tr>                                  <th width="100">Col 1</th>                                  <th width="100">Col 2</th>                                  <th width="100">Col 3 is a long header name</th>                                  <th width="300">Col 4</th>                          </tr>                  </thead>                  <tbody>                          <tr>                                  <td>This is data 1 with overflowing content</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                          <tr>                                  <td>This is data 1</td>                                  <td>This is data 2</td>                                  <td>This is data 3</td>                                  <td>This is data 4</td>                          </tr>                  </tbody>          </table>            <h2>Example 3</h2>          <p>                  Flexigrid with a dynamic data, paging, search, toolbar, and connected                  to an JSON file. (<a href="#"                          οnclick="$(this).parent().next().toggle(); return false;">Show                          sample code</a>)          </p>          <div class="code">                  <pre>  $("#flex1").flexigrid({          url: 'post2.php',          dataType: 'json',          colModel : [                  {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},                  {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},                  {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},                  {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},                  {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}                  ],          buttons : [                  {name: 'Add', bclass: 'add', onpress : test},                  {name: 'Delete', bclass: 'delete', onpress : test},                  {separator: true}                  ],          searchitems : [                  {display: 'ISO', name : 'iso'},                  {display: 'Name', name : 'name', isdefault: true}                  ],          sortname: "iso",          sortorder: "asc",          usepager: true,          title: 'Countries',          useRp: true,          rp: 15,          showTableToggleBtn: true,          width: 700,          height: 200  });     </pre>          </div>          <table class="flexme3" style="display: none"></table>            <script type="text/javascript">                  $('.flexme1').flexigrid();                  $('.flexme2').flexigrid({                          height : 'auto',                          striped : false                  });                    $(".flexme3").flexigrid({                          url : 'post-xml.php',                          dataType : 'xml',                          colModel : [ {                                  display : 'ISO',                                  name : 'iso',                                  width : 40,                                  sortable : true,                                  align : 'center'                          }, {                                  display : 'Name',                                  name : 'name',                                  width : 180,                                  sortable : true,                                  align : 'left'                          }, {                                  display : 'Printable Name',                                  name : 'printable_name',                                  width : 120,                                  sortable : true,                                  align : 'left'                          }, {                                  display : 'ISO3',                                  name : 'iso3',                                  width : 130,                                  sortable : true,                                  align : 'left',                                  hide : true                          }, {                                  display : 'Number Code',                                  name : 'numcode',                                  width : 80,                                  sortable : true,                                  align : 'right'                          } ],                          buttons : [ {                                  name : 'Add',                                  bclass : 'add',                                  onpress : test                          }, {                                  name : 'Delete',                                  bclass : 'delete',                                  onpress : test                          }, {                                  separator : true                          } ],                          searchitems : [ {                                  display : 'ISO',                                  name : 'iso'                          }, {                                  display : 'Name',                                  name : 'name',                                  isdefault : true                          } ],                          sortname : "iso",                          sortorder : "asc",                          usepager : true,                          title : 'Countries',                          useRp : true,                          rp : 15,                          showTableToggleBtn : true,                          width : 700,                          height : 200                  });                    function test(com, grid) {                          if (com == 'Delete') {                                  confirm('Delete ' + $('.trSelected', grid).length + ' items?')                          } else if (com == 'Add') {                                  alert('Add New Item');                          }                  }          </script>  </body>  </html>

                        showTableToggleBtn : true, 
                        width : 700, 
                        height : 200 
                }); 
 
                function test(com, grid) { 
                        if (com == 'Delete') { 
                                confirm('Delete ' + $('.trSelected', grid).length + ' items?') 
                        } else if (com == 'Add') { 
                                alert('Add New Item'); 
                        } 
                } 
        </script> 
</body> 
</html> 
A_post
关注
jquery表格插件flexgrid最新版及实例
12-23
好好的flexgrid组件就这样断更，给大家留着希望能够帮助你，此外还加了些例子，希望都用其拉
Jquery flexgrid
weibblove的专栏
05-31 4049
<br />现在我们来实现一个使用ajax动态调用后台产生的数据来填充table的内容的小例子。Html代码 <%@ page language="java" contentType="text/html; charset=utf-8"      pageEncoding="utf-8"%>  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <htm
jQueryflexgrid
梦成个人博客
10-31 895
jQueryflexgrid V1.1 初始化参数说明： view source print? 01 height : 200, // flexigrid插件的高度，单位为px 02 width : 'auto', // 宽度值，auto表示根据每列的宽度自动计算 03
flexigrid参数说明
08-02 250
代码如下:Flexigrid部分代码代码 if (t.grid) return false; // return if already exist // apply default properties p = $.extend({ height : 200, // flexigrid插件的高度，单位为px width : 'auto', // 宽度值，auto表示根据每列的宽度自动计算 stri
jQuery flexgrid 学习
03-19
《jQuery flexgrid 学习详解》 在网页开发中，数据展示往往是一个不可或缺的部分，而jQuery flexgrid就是一款强大的网格布局工具，它可以帮助开发者轻松实现复杂的数据表格展示和操作。本文将深入探讨jQuery ...
jQuery FlexGrid组件源码及演示示例
jQuery FlexGrid是一个基于jQuery库的表格组件，它提供了一套丰富的界面和交互功能，用于在网页上创建动态和响应式的网格布局。使用FlexGrid，开发者可以快速实现数据的展示、编辑、筛选、排序等功能，适用于实现...
jQuery flexgrid组件应用与实践技巧
根据给出的文件信息，这里将对标题“jQuery flexgrid 学习”以及博文链接中可能蕴含的知识点进行详细阐述。请注意，由于提供的描述内容为“NULL”，我们无法从描述中提取相关知识点，所以将重点放在标题和标签以及...
JQuery FlexGrid功能增强：支持直接数据增量更新
FlexGrid 是一个基于 jQuery 的网格控件，它提供了丰富的用户界面和交互特性，使得开发者能够轻松创建数据驱动的表格。它通常被用于数据展示、编辑、搜索等场景，增强网页的动态交互性。 #### 2. 版本更新的意义 在...
掌握JQuery flexgrid插件：源代码深入学习指南
JQuery的flexgrid插件是一种基于JQuery的用户界面组件，主要用于创建和操作网格布局的表格。通过flexgrid插件，开发者可以较为轻松地实现数据的展示、编辑、排序、分页、过滤、行拖拽以及自定义列等多种功能。该插件...
jquery flexgrid使用部分说明
Miklechun的专栏
07-09 1329
觉得这个还挺有帮助的，记录下。 $('#EmployeeGrid').flexigrid({ //表格寬度(注意在IE不能使用100%之類字串) width:$(window).width()-2, //表格高度(注意在IE不能使用100%之類字串) height:480, //資料列雙色交差 striped:t
Jquery flexgrid学习笔记（二）
fangbubu
08-20 126
之前的学习笔记(一)是直接在一个已经写死了的table中实现的，现在我们来实现动态数据的调用。 现在我们来实现一个使用ajax动态调用后台产生的数据来填充table的内容的小例子。 &lt;%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%&gt; &lt;!DOCTYP...
jquery表格插件之flexigrid教程实用版
felixsyan的专栏
12-26 327
用插件来做规律性很强的数据展现是个不错的选择，jquery插件家族中这类插件通常叫做table或者grid，本人用过两个有名的插 件:jqgrid和flexgrid，自己也曾经在使用jquery之前尝试过自己写grid插件，这篇文章将就flexgrid插件的使用和改造展开。 非常囧的是flexgrid的homepage居然无法访问了，不过没关系，Google group上已经有了相关的讨论，且非...
jquery flexgrid加载前处理-preProcess
u014049555的专栏
03-13 1273
三四十
jQuery Table 系列:Flexigrid概述与基本操作
行成于思，形之于文
05-20 737
Flexigrid 采用Ext风格的外观，代码简洁 如何在Asp.Net  中应用，可参考 http://ddtbnt.codeplex.com/  如何在Asp.net MVC 应用，可参考 http://www.codeproject.com/Articles/30588/ASP-NET-MVC-Flexigrid-sample
小结(jquery,ui,flexgrid,数据库资源)
bei_fang_du_lang的专栏
09-18 573
最近做了个小项目，小有收获，记下。 1、用了js的一些东西，jQuery， UI， flexgrid，代码如下。$ ("#td" + numChapter).find ("input.chapterName").on ('keyup', function (event) { if (!($.trim ($ ("#td" + numChapter).find ("input.chapterN
jQuery实现简单计算器（Flex布局）
wjm11的博客
06-26 655
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;Title&lt;/title&gt;    &lt;style&gt;        .board {            margin: 60px
jquery Flexgrid 取记录的方式
longflang的博客
08-14 218
思路：改造Flexgrid.js的方法。在 Flexgrid.js中增加对应的方法。 //Mignet's code $.fn.flexGetData = function() { // function to get data from grid var griddata = {total:1,page:1,rows:[]}; this.each( ...
基于jQuery的内容滚动插件flexSlider.js
781193278专栏
01-08 2530
描述：轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。 特性： 1）支持滑动和淡入淡出效果； 2）支持水平、垂直方向滑动； 3）支持键盘方向键控制； 4）支持触控滑动； 5）支持图文混排，支持各种html元素； 6）自适应屏幕尺寸； 7）可控制滑动单元个数； 8）更多选项设置和回调函数。 使用方法： 1）下载flexisel.js插件 2）引入js文件