1. 程式人生 > >js前端頁面回顯的方式

js前端頁面回顯的方式

function load() {
    $('#departTable')
        .bootstrapTable(
            {
                method : 'get', // 伺服器資料的請求方式 get or post
                url : prefix + "/list", // 伺服器資料的載入地址
                striped : true, // 設定為true會有隔行變色效果
                dataType : "json", // 伺服器返回的資料型別
                pagination : true, // 設定為true會在底部顯示分頁條
                // queryParamsType : "limit",
                // //設定為limit則會發送符合RESTFull格式的引數
                singleSelect : false, // 設定為true將禁止多選
                iconSize : 'outline',
                pageSize : 10, // 如果設定了分頁,每頁資料條數
                pageNumber : 1, // 如果設定了分佈,首頁頁碼
                search : true, // 是否顯示搜尋框
                showColumns : true, // 是否顯示內容下拉框(選擇顯示的列)
                sidePagination : "server",// 設定在哪裡進行分頁,可選值為"client" 或者
                // "server"
                // queryParams : queryParams,
                // //請求伺服器資料時,你可以通過重寫引數的方式新增一些額外的引數,例如 toolbar 中的引數 如果
                // queryParamsType = 'limit' ,返回引數必須包含
                // limit, offset, search, sort, order 否則, 需要包含:
                // pageSize, pageNumber, searchText, sortName,
                // sortOrder.
                // 返回false將會終止請求
                columns : [
                    {
                        field : 'id', // 列欄位名
                        title : '序號' // 列標題
                    },
                    {
                        field : 'deptNamee',
                        title : '單位名稱'
                    },
                    {
                        field : 'detailAddress',
                        title : '單位地址'
                    },
                    {
                        field : 'postalcode',
                        title : '郵政編碼'
                    },
                    {
                        field : 'adminDivision',
                        title : '行政區劃程式碼'
                    },
                    {
                        field : 'principalName',
                        title : '單位負責人'
                    },
                    {
                        field : 'principalJob',
                        title : '職務'
                    },
                    {
                        field : 'principalPhone',
                        title : '辦公電話'
                    },
                    {
                        field : 'principalCellPhone',
                        title : '行動電話'
                    },
                    {
                        field : 'principalEmail',
                        title : '電子郵件'
                    },
                    {
                        field : 'subjection',
                        title : '隸屬關係'
                    },
                    {
                        field : 'unitType',
                        title : '單位型別'
                    },
                    {
                        field : 'industryType',
                        title : '行業類別'
                    },
                    {
                        field : 'count',
                        title : '資訊系統總數總數'
                    }]
            });
}

這種方式實際上是通過js向後端發請求,去執行任務,然後將結果返回給前端去顯示的。

 <script src="/js/appjs/nsmp/analysis/deptAnalysis.js"></script>

這是頁面前端的呼叫,實際上流程是:

controller頁面載入通過controller層去完成載入,然後html層載入呼叫js層,js層載入傳送介面到controller層,controller層通過方法去呼叫後端的service層,service層的IMPL去實現方法,通過dao層去呼叫XML層,然後XML去操作資料庫。