ligerui ligerGrid 先填写搜索条件，在查询 因为如果数据比较多时，这样子比较消耗流量

这个例子里面包含ligerui包含
表格搜索支持
明细表格
按照条件先搜索在查询

<script type="text/javascript">
    var manager,g;
    $(function() {
                         //生成一个检索按钮
                        $("#searchbtn").ligerButton({
                            click : function() {
                                grid();//调用搜索的按钮
                            },
                            text : '检索',
                            width : 60
                        });
                        $("#pageloading").hide();

    });
    function grid(){
    //搜索关键的地方window['g'] = manager = $("#maingrid")
                .ligerGrid
        window['g'] = manager = $("#maingrid")
                .ligerGrid(
                        {
                            columns : [
                                    {
                                        display : '班级名称',
                                        name : 'name',
                                        id : 'name',
                                        minWidth : 45,
                                        align : 'center'
                                    },
                                    {
                                        display : '人数',
                                        name : 'people',
                                        id : 'people',
                                        minWidth : 90,
                                        align : 'center'
                                    }
                                    } 
                                    ],
                            pageSize : 30,
                            pageParmName : 'p.page',
                            pagesizeParmName : 'p.pagesize',
                            sortnameParmName : 'p.sortname',
                            sortorderParmName : 'p.sortorder',
                            url : '${pageContext.request.contextPath}/manager/classes/showList.action',
                            parms : $('form').serializeArray(),//这里是关键，传递搜索条件的参数  serializeArray是jquery自带的吧form转json传递的方法
                            enabledEdit : false,
                            rownumbers : false,
                            width : '98%',
                            height : '370',
                            //这里是明细查询
                            detail : {
                                onShowDetail : f_showOrder,height:'auto'
                            },
                            alternatingRow : false
                        });
    }
    function f_showOrder(row, detailPanel, callback) {
       var grid = document.createElement('div');
            $(detailPanel).append(grid);
            $(grid).ligerGrid({
                columns : [ 
                {
                    display : '姓名',
                    name : 'name',
                    minWidth : 100
                },
                {
                    display : '性别',
                    name : 'sex',
                    minWidth : 60
                },
                {
                    display : '联系方式',
                    name : 'parentscall1',
                    minWidth : 135
                }
                ],
                url : '${pageContext.request.contextPath}/manager/registration/showClassesRegistration.action?registration.classes.id='+row.id,
                rownumbers : true,
                showToggleColBtn : false,
                usePager: false,  
                columnWidth : 100,
                onAfterShowData : callback,
                frozen : false
            });


    }

    function getParent() {
        var row = manager.getParent(manager.getSelectedRow());
        alert(JSON.stringify(row));
    }
    function getSelected() {
        var row = manager.getSelectedRow();
        if (!row) {
            alert('请选择行');
            return;
        }
        alert(JSON.stringify(row));
    }
    function getData() {
        var data = manager.getData();
        alert(JSON.stringify(data));
    }
    function hasChildren() {
        var row = manager.getSelectedRowObj();
        alert(manager.hasChildren(row));
    }
    function isLeaf() {
        var row = manager.getSelectedRowObj();
        alert(manager.isLeaf(row));
    }
</script>
</head>
<body >
    <form id="search_form">
        <div id="searchbar">
            <div class="l-panel-search-item">
                班级名称： <input id="param" name="classes.name" value="" />
                教室名称： <input id="param" name="classes.classroom.name" value="" />
                教师名称： <input id="param" name="classes.teacher.name" value="" />
                </div>
            <div class="l-panel-search-item">
                <div id="searchbtn"></div>
            </div>
        </div>
    </form>
    <div class="l-loading" style="display:block" id="pageloading"></div>
    <div class="l-clear"></div>
    <div id="maingrid" style="margin:0 auto;"></div>
    <div id="scale" style="text-align: right;"></div>

大概就是这样子。之前百度的时候。真的没有百度出自己想要的答案。所以自己写了个。供大家参考。、
如果大家有不清楚的。可以加我qq:2289462759,说明为什么要加我