返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: javascript学习 >

jquery表格Flexigrid插件

2020-04-27 文章标签: jquery 表格 插件 浏览次数:

我们继续讲解jquery插件,今天介绍的是使用Flexigrid的使用,他可以鼠标右键进行数据过滤,直接显示自己需要的数据

jquery操作创建元素

我们看看效果图

使用Flexigrid

我们右键鼠标进行过滤

使用Flexigrid

这样就可以显示自己想看的数据。不显示的把前面的勾勾去掉就可以

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flexigrid</title>
<link href="//freemuban.com/js/427/images/flexigrid.css" rel="stylesheet" type="text/css" media="all">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/427/flexigrid.js"></script>
<script type="text/javascript">
$(function(){
$('#grid').flexigrid();
})
</script>
<style type="text/css">
#wrap {
    width:90%;
}
</style>
</head>
<body>
<h1>Flexigrid表格组件</h1>
<div id="wrap">
    <table id="grid">
        <thead>
            <tr>
                <th width="30">排名</th>
                <th width="100">校名</th>
                <th width="40">总得分</th>
                <th width="100">人才培养总得分</th>
                <th width="100">研究生培养得分</th>
                <th width="100">本科生培养得分</th>
                <th width="100">科学研究总得分</th>
                <th width="100">自然科学研究得分</th>
                <th width="50">社会科学研究得分</th>
                <th width="50">所属省份</th>
                <th width="50">分省排名</th>
                <th width="50">学校类型</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>清华大学 </td>
                <td>296.77</td>
                <td>128.92</td>
                <td>93.83</td>
                <td>35.09</td>
                <td>167.85</td>
                <td>148.47</td>
                <td>19.38</td>
                <td width="16">京 </td>
                <td width="12">1 </td>
                <td>理工 </td>
            </tr>
            <tr>
                <td>2</td>
                <td>北京大学 </td>
                <td>222.02</td>
                <td>102.11</td>
                <td>66.08</td>
                <td>36.03</td>
                <td>119.91</td>
                <td>86.78</td>
                <td>33.13</td>
                <td>京 </td>
                <td>2 </td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>3</td>
                <td>浙江大学 </td>
                <td>205.65</td>
                <td>94.67</td>
                <td>60.32</td>
                <td>34.35</td>
                <td>110.97</td>
                <td>92.32</td>
                <td>18.66</td>
                <td>浙 </td>
                <td>1</td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>4</td>
                <td>上海交大</td>
                <td>150.98</td>
                <td>67.08</td>
                <td>47.13</td>
                <td>19.95</td>
                <td>83.89</td>
                <td>77.49</td>
                <td>6.41</td>
                <td>沪 </td>
                <td>1</td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>5</td>
                <td>南京大学</td>
                <td>136.49</td>
                <td>62.84</td>
                <td>40.21</td>
                <td>22.63</td>
                <td>73.65</td>
                <td>53.87</td>
                <td>19.78</td>
                <td>苏</td>
                <td>1</td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>6</td>
                <td>复旦大学 </td>
                <td>136.36</td>
                <td>63.57</td>
                <td>40.26</td>
                <td>23.31</td>
                <td>72.78</td>
                <td>51.47</td>
                <td>21.31</td>
                <td>沪</td>
                <td>2</td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>7</td>
                <td>华中科大</td>
                <td>110.08</td>
                <td>54.76</td>
                <td>30.26</td>
                <td>24.50</td>
                <td>55.32</td>
                <td>47.45</td>
                <td>7.87</td>
                <td>鄂 </td>
                <td>1</td>
                <td>理工 </td>
            </tr>
            <tr>
                <td>8</td>
                <td>武汉大学 </td>
                <td>103.82</td>
                <td>50.21</td>
                <td>29.37</td>
                <td>20.84</td>
                <td>53.61</td>
                <td>36.17</td>
                <td>17.44</td>
                <td>鄂 </td>
                <td>2</td>
                <td>综合</td>
            </tr>
            <tr>
                <td>9</td>
                <td>吉林大学 </td>
                <td>96.44</td>
                <td>48.61</td>
                <td>25.74</td>
                <td>22.87</td>
                <td>47.83</td>
                <td>38.13</td>
                <td>9.70</td>
                <td>吉 </td>
                <td>1</td>
                <td>综合</td>
            </tr>
            <tr>
                <td>10</td>
                <td>西安交大</td>
                <td>92.82</td>
                <td>47.22</td>
                <td>24.54</td>
                <td>22.68</td>
                <td>45.60</td>
                <td>35.47</td>
                <td>10.13</td>
                <td>陕</td>
                <td>1</td>
                <td>综合</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

demo2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flexigrid</title>
<link href="//freemuban.com/js/427/images/flexigrid.css" rel="stylesheet" type="text/css" media="all">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/427/flexigrid.js"></script>
<script type="text/javascript">
$(function(){
$('#grid').flexigrid();
})
</script>
<style type="text/css">
#wrap {
    width:90%;
}
</style>
</head>
<body>
<h1>Flexigrid表格组件</h1>
<div id="wrap">
    <table id="grid">
        <thead>
            <tr>
                <th>排名</th>
                <th>校名</th>
                <th>总得分</th>
                <th>人才培养总得分</th>
                <th>研究生培养得分</th>
                <th>本科生培养得分</th>
                <th>科学研究总得分</th>
                <th>自然科学研究得分</th>
                <th>社会科学研究得分</th>
                <th>所属省份</th>
                <th>分省排名</th>
                <th>学校类型</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>清华大学 </td>
                <td>296.77</td>
                <td>128.92</td>
                <td>93.83</td>
                <td>35.09</td>
                <td>167.85</td>
                <td>148.47</td>
                <td>19.38</td>
                <td width="16">京 </td>
                <td width="12">1 </td>
                <td>理工 </td>
            </tr>
            <tr>
                <td>2</td>
                <td>北京大学 </td>
                <td>222.02</td>
                <td>102.11</td>
                <td>66.08</td>
                <td>36.03</td>
                <td>119.91</td>
                <td>86.78</td>
                <td>33.13</td>
                <td>京 </td>
                <td>2 </td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>3</td>
                <td>浙江大学 </td>
                <td>205.65</td>
                <td>94.67</td>
                <td>60.32</td>
                <td>34.35</td>
                <td>110.97</td>
                <td>92.32</td>
                <td>18.66</td>
                <td>浙 </td>
                <td>1</td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>4</td>
                <td>上海交大</td>
                <td>150.98</td>
                <td>67.08</td>
                <td>47.13</td>
                <td>19.95</td>
                <td>83.89</td>
                <td>77.49</td>
                <td>6.41</td>
                <td>沪 </td>
                <td>1</td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>5</td>
                <td>南京大学</td>
                <td>136.49</td>
                <td>62.84</td>
                <td>40.21</td>
                <td>22.63</td>
                <td>73.65</td>
                <td>53.87</td>
                <td>19.78</td>
                <td>苏</td>
                <td>1</td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>6</td>
                <td>复旦大学 </td>
                <td>136.36</td>
                <td>63.57</td>
                <td>40.26</td>
                <td>23.31</td>
                <td>72.78</td>
                <td>51.47</td>
                <td>21.31</td>
                <td>沪</td>
                <td>2</td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>7</td>
                <td>华中科大</td>
                <td>110.08</td>
                <td>54.76</td>
                <td>30.26</td>
                <td>24.50</td>
                <td>55.32</td>
                <td>47.45</td>
                <td>7.87</td>
                <td>鄂 </td>
                <td>1</td>
                <td>理工 </td>
            </tr>
            <tr>
                <td>8</td>
                <td>武汉大学 </td>
                <td>103.82</td>
                <td>50.21</td>
                <td>29.37</td>
                <td>20.84</td>
                <td>53.61</td>
                <td>36.17</td>
                <td>17.44</td>
                <td>鄂 </td>
                <td>2</td>
                <td>综合</td>
            </tr>
            <tr>
                <td>9</td>
                <td>吉林大学 </td>
                <td>96.44</td>
                <td>48.61</td>
                <td>25.74</td>
                <td>22.87</td>
                <td>47.83</td>
                <td>38.13</td>
                <td>9.70</td>
                <td>吉 </td>
                <td>1</td>
                <td>综合</td>
            </tr>
            <tr>
                <td>10</td>
                <td>西安交大</td>
                <td>92.82</td>
                <td>47.22</td>
                <td>24.54</td>
                <td>22.68</td>
                <td>45.60</td>
                <td>35.47</td>
                <td>10.13</td>
                <td>陕</td>
                <td>1</td>
                <td>综合</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

demo3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flexigrid</title>
<link href="//freemuban.com/js/427/images/flexigrid.css" rel="stylesheet" type="text/css" media="all">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/427/flexigrid.js"></script>
<script type="text/javascript">
$(function(){
$('#grid').flexigrid({
buttons : [
{name: '增加', bclass: 'add', onpress : test},
{name: '删除', bclass: 'delete', onpress : test},
{separator: true}
],
searchitems : [
{display: '校名', name : '校名', isdefault: true},
{display: '所属省份', name : '所属省份'}
],
sortname: "排名",
sortorder: "asc",
usepager: true,
singleSelect: true,
title: '高校排行榜',
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>
<style type="text/css">
#wrap {
    width:90%;
}
.flexigrid div.fbutton .add {
    background: url(//freemuban.com/js/427/images/add.png) no-repeat center left;
}
.flexigrid div.fbutton .delete {
    background: url(//freemuban.com/js/427/images/close.png) no-repeat center left;
}
</style>
</head>
<body>
<h1>Flexigrid表格组件</h1>
<div id="wrap">
    <table id="grid">
        <thead>
            <tr>
                <th width="30">排名</th>
                <th width="100">校名</th>
                <th width="40">总得分</th>
                <th width="100">人才培养总得分</th>
                <th width="100">研究生培养得分</th>
                <th width="100">本科生培养得分</th>
                <th width="100">科学研究总得分</th>
                <th width="100">自然科学研究得分</th>
                <th width="50">社会科学研究得分</th>
                <th width="50">所属省份</th>
                <th width="50">分省排名</th>
                <th width="50">学校类型</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>清华大学 </td>
                <td>296.77</td>
                <td>128.92</td>
                <td>93.83</td>
                <td>35.09</td>
                <td>167.85</td>
                <td>148.47</td>
                <td>19.38</td>
                <td width="16">京 </td>
                <td width="12">1 </td>
                <td>理工 </td>
            </tr>
            <tr>
                <td>2</td>
                <td>北京大学 </td>
                <td>222.02</td>
                <td>102.11</td>
                <td>66.08</td>
                <td>36.03</td>
                <td>119.91</td>
                <td>86.78</td>
                <td>33.13</td>
                <td>京 </td>
                <td>2 </td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>3</td>
                <td>浙江大学 </td>
                <td>205.65</td>
                <td>94.67</td>
                <td>60.32</td>
                <td>34.35</td>
                <td>110.97</td>
                <td>92.32</td>
                <td>18.66</td>
                <td>浙 </td>
                <td>1</td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>4</td>
                <td>上海交大</td>
                <td>150.98</td>
                <td>67.08</td>
                <td>47.13</td>
                <td>19.95</td>
                <td>83.89</td>
                <td>77.49</td>
                <td>6.41</td>
                <td>沪 </td>
                <td>1</td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>5</td>
                <td>南京大学</td>
                <td>136.49</td>
                <td>62.84</td>
                <td>40.21</td>
                <td>22.63</td>
                <td>73.65</td>
                <td>53.87</td>
                <td>19.78</td>
                <td>苏</td>
                <td>1</td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>6</td>
                <td>复旦大学 </td>
                <td>136.36</td>
                <td>63.57</td>
                <td>40.26</td>
                <td>23.31</td>
                <td>72.78</td>
                <td>51.47</td>
                <td>21.31</td>
                <td>沪</td>
                <td>2</td>
                <td>综合 </td>
            </tr>
            <tr>
                <td>7</td>
                <td>华中科大</td>
                <td>110.08</td>
                <td>54.76</td>
                <td>30.26</td>
                <td>24.50</td>
                <td>55.32</td>
                <td>47.45</td>
                <td>7.87</td>
                <td>鄂 </td>
                <td>1</td>
                <td>理工 </td>
            </tr>
            <tr>
                <td>8</td>
                <td>武汉大学 </td>
                <td>103.82</td>
                <td>50.21</td>
                <td>29.37</td>
                <td>20.84</td>
                <td>53.61</td>
                <td>36.17</td>
                <td>17.44</td>
                <td>鄂 </td>
                <td>2</td>
                <td>综合</td>
            </tr>
            <tr>
                <td>9</td>
                <td>吉林大学 </td>
                <td>96.44</td>
                <td>48.61</td>
                <td>25.74</td>
                <td>22.87</td>
                <td>47.83</td>
                <td>38.13</td>
                <td>9.70</td>
                <td>吉 </td>
                <td>1</td>
                <td>综合</td>
            </tr>
            <tr>
                <td>10</td>
                <td>西安交大</td>
                <td>92.82</td>
                <td>47.22</td>
                <td>24.54</td>
                <td>22.68</td>
                <td>45.60</td>
                <td>35.47</td>
                <td>10.13</td>
                <td>陕</td>
                <td>1</td>
                <td>综合</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。