`

flexigrid

阅读更多
http://www.codeweblog.com/stag/flexigrid-jqmshow/

flexigrid页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" type="text/css" href="resources/flexigrid/css/flexigrid/flexigrid.css" />
                <script type="text/javascript" src="resources/js/jquery1.3.2.js"></script>
                <script type="text/javascript" src="resources/flexigrid/flexigrid.js"></script>
                <script type="text/javascript">
                        $(document).ready(function(){
                                $("#flex1").flexigrid
                                                (
                                                {
                                                url: 'GetUsersList.action',
                                                dataType: 'json',
                                                colModel : [
                                                        //{display: '<input type="checkbox" alt="  Select All  ">', name : 'getAll', width : 50, sortable : true, align: 'center'},
                                                        {display: '  No.  ', name : 'id', width : 40, sortable : true, align: 'center'},
                                                        {display: '  Name  ', name : 'name', width : 40, sortable : true, align: 'center'},
                                                        {display: '  Gender  ', name : 'gender', width : 180, sortable : true, align: 'left'},
                                                        {display: '  Age  ', name : 'age', width : 120, sortable : true, align: 'left'},
                                                        {display: '  Birthday  ', name : 'birthday', width : 130, sortable : true, align: 'left', hide: true},
                                                        {display: '  Phone ', name : 'phone', width : 80, sortable : true, align: 'right'},
                                                        {display: '  Address  ', name : 'address', width : 80, sortable : true, align: 'right'}
                                                        ],
                                                searchitems : [
                                                        {display: '  No.  ', name : 'id'},
                                                        {display: '  Name  ', name : 'name', isdefault: true}
                                                        ],
                                                sortname: "id",
                                                sortorder: "asc",
                                                usepager: true,
                                                title: '  User list  ',
                                                useRp: true,
                                                checkbox : true,//   Checkbox if you want
                                                rowId : 'id',//   Checkbox binding line  id
                                                rp: 10,
                                                showTableToggleBtn: true,//  Fold
                                                resizable: true,
                                                striped: true, //  Speckle effect is displayed, the default is the parity in the form of interactive
                                                width: 700,
                                                height: 255
                                                }
                                                );   

                        });

</script>
        </head>
        <body>
                <h1>
                        Flexigrid Example Page
                </h1>
                <br />
                <br />
                <table></table>
                <br />
                <br />
        </body>
</html>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics