有一个需求是需要用jq-Grid展示一个可以折叠的表格,并且要求在页面初始化的时候就将表格折叠起来,我看了一下文档可以给列表增加 toolbar: [true, "top"],caption:"标题",可以实现,需要每次点击页面之后列表默认是展开的

 gridComplete: function () {
                        $("#newjqGrid").closest("#gview_newjqGrid").css({"overflow-x": "hidden"})
                        $("#newjqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
                        if ($("span.ui-jqgrid-headlink").hasClass("glyphicon-circle-arrow-up")) {
                            $("span.ui-jqgrid-headlink").removeClass("glyphicon-circle-arrow-up").addClass("glyphicon-circle-arrow-down")
                        }
                    },

通过改变类名后,列表第一次会折叠,第二次失效,于是我又想到给元素添加点击事件,

 gridComplete: function () {
                        $("#newjqGrid").closest("#gview_newjqGrid").css({"overflow-x": "hidden"})
                        $("#newjqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
                        if ($("span.ui-jqgrid-headlink").hasClass("glyphicon-circle-arrow-up")) {
                            $("span.ui-jqgrid-headlink").trigger("click")
                        }
                    },

这样还是达不到预期的效果,我在想是不是发生冒泡,所以没达到预期的效果,于是在if判断里面加了 return false 仍然达不到效果,于是我在切换元素类名的时候同时触发点击事件,最终达到预期的效果

 gridComplete: function () {
                        $("#newjqGrid").closest("#gview_newjqGrid").css({"overflow-x": "hidden"})
                        $("#newjqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
                        if ($("span.ui-jqgrid-headlink").hasClass("glyphicon-circle-arrow-up")) {
                            $("span.ui-jqgrid-headlink").removeClass("glyphicon-circle-arrow-up").addClass("glyphicon-circle-arrow-down")
                            $("span.ui-jqgrid-headlink").trigger("click")
                            return false
                        }
                    },