bootstarp table 열 가로 확장(동적 열)

9130 단어
총괄적으로 말하자면 먼저 데이터베이스에서 표시할 열을 조회하고 표두로 맞춘다.그리고 표시할 데이터를 조회하고 테이블에 연결합니다. 주의해야 할 것은 헤더의 filed 값은 데이터의 필드 이름과 같아야 합니다. 저는 ArrayList에 저장된 그룹을 사용했습니다. 그룹 아래 표를 데이터의 필드 이름으로 사용하기 때문에 헤더의 filed도 0, 1, 2, 3 으로 해야 합니다.이름을 지정합니다.방법이 스마트하지 않은 것 같은데???
<span style="color:#bababa;">type=</span><span style="color:#a5c261;">"text/javascript"</span><span style="color:#e8bf6a;">>
</span><span style="color:#e8bf6a;">    </span><span style="color:#9876aa;">$</span>(<span style="color:#cc7832;"><strong>function </strong></span>() {

        <span style="color:#cc7832;"><strong>var </strong></span>questionColumns = []<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">        </span><span style="color:#9876aa;">$</span>.<span style="color:#9876aa;">ajax</span>({
            <span style="color:#9876aa;">url</span>: <span style="color:#6a8759;">"/esubjects/viewEsubjectsList"</span><span style="color:#cc7832;">,
</span><span style="color:#808080;">//  
</span><span style="color:#808080;">
</span><span style="color:#808080;">            </span><span style="color:#9876aa;">type</span>: <span style="color:#6a8759;">"get"</span><span style="color:#cc7832;">,
</span><span style="color:#808080;">//  
</span><span style="color:#808080;">            </span><span style="color:#9876aa;">dataType</span>: <span style="color:#6a8759;">"json"</span><span style="color:#cc7832;">,
</span><span style="color:#808080;">//  
</span><span style="color:#808080;">            </span><span style="color:#9876aa;">data</span>: <span style="color:#6a8759;">'data'</span><span style="color:#cc7832;">,
</span><span style="color:#cc7832;">            </span><span style="color:#ffc66d;">success</span>: <span style="color:#cc7832;"><strong>function </strong></span>(data) {
                <span style="color:#cc7832;"><strong>var </strong></span>mdata = data.<span style="color:#9876aa;">data</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;">                </span><span style="color:#cc7832;"><strong>var </strong></span>t0 = {<span style="color:#9876aa;">field</span>: <span style="color:#6a8759;">"0"</span><span style="color:#cc7832;">, </span><span style="color:#9876aa;">title</span>: <span style="color:#6a8759;">" "</span><span style="color:#cc7832;">, </span><span style="color:#9876aa;">align</span>: <span style="color:#6a8759;">"center"</span>}<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">                </span><span style="color:#cc7832;"><strong>var </strong></span>num=mdata.<span style="color:#9876aa;">length</span>+<span style="color:#6897bb;">1</span><span style="color:#cc7832;">;
</span><span style="color:#cc7832;">                </span><span style="color:#9876aa;">console</span>.<span style="color:#ffc66d;">log</span>(num)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">                </span>questionColumns.<span style="color:#ffc66d;">push</span>(t0)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">                </span><span style="color:#cc7832;"><strong>for </strong></span>(<span style="color:#cc7832;"><strong>var </strong></span>i = <span style="color:#6897bb;">0</span><span style="color:#cc7832;">; </span>i < mdata.<span style="color:#9876aa;">length</span><span style="color:#cc7832;">; </span>i++) {
                    <span style="color:#cc7832;"><strong>var </strong></span>temp = {<span style="color:#9876aa;">field</span>: i+<span style="color:#6897bb;">1</span><span style="color:#cc7832;">, </span><span style="color:#9876aa;">title</span>: mdata[i].<span style="color:#9876aa;">subjectname</span><span style="color:#cc7832;">, </span><span style="color:#9876aa;">align</span>: <span style="color:#6a8759;">"center"</span>}<span style="color:#cc7832;">;</span><span style="color:#808080;">// columns
</span><span style="color:#808080;">                    </span>questionColumns.<span style="color:#ffc66d;">push</span>(temp)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">                </span>}
                <span style="color:#cc7832;"><strong>var </strong></span>t1 = {<span style="color:#9876aa;">field</span>: num<span style="color:#cc7832;">, </span><span style="color:#9876aa;">title</span>: <span style="color:#6a8759;">" "</span><span style="color:#cc7832;">, </span><span style="color:#9876aa;">align</span>: <span style="color:#6a8759;">"center"</span>}<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">                </span>questionColumns.<span style="color:#ffc66d;">push</span>(t1)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">
</span><span style="color:#cc7832;">                </span><span style="color:#9876aa;">$</span>(<span style="color:#6a8759;">'#class_mark'</span>).<span style="color:#ffc66d;">bootstrapTable</span>(<span style="color:#6a8759;">'destroy'</span>)<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">                </span><span style="color:#9876aa;">$</span>(<span style="color:#6a8759;">'#class_mark'</span>).<span style="color:#ffc66d;">bootstrapTable</span>({
                    <span style="color:#9876aa;">url</span>: <span style="color:#6a8759;">"/report/queryRClassMark"</span><span style="color:#cc7832;">,         </span><span style="color:#808080;">// URL(*)
</span><span style="color:#808080;">                    </span><span style="color:#9876aa;">method</span>: <span style="color:#6a8759;">'post'</span><span style="color:#cc7832;">,                      </span><span style="color:#808080;">// (*)
</span><span style="color:#808080;">//                    classes: 'table table-hdgw',
</span><span style="color:#808080;">                    </span><span style="color:#9876aa;">dataType</span>: <span style="color:#6a8759;">"json"</span><span style="color:#cc7832;">,
</span><span style="color:#808080;">//                    contentType: 'application/json',
</span><span style="color:#808080;">//                    queryParams: {},// (*)
</span><span style="color:#808080;">
</span><span style="color:#808080;">                    </span><span style="color:#9876aa;">columns</span>: questionColumns<span style="color:#cc7832;">,
</span><span style="color:#cc7832;">
</span><span style="color:#cc7832;">                </span>})
                <span style="color:#cc7832;">;
</span><span style="color:#cc7832;">            </span>}
        })
    })<span style="color:#cc7832;">;
</span><span style="color:#cc7832;">
</span><span style="color:#e8bf6a;">

html에 table 하나만 넣으면 ok:
class="table table-striped" id="class_mark" align="center"
       striped="true" data-height="360" data-click-to-select="true">

좋은 웹페이지 즐겨찾기