欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

easyUI 實(shí)現(xiàn)的后臺(tái)分頁(yè)與前臺(tái)顯示功能示例

 更新時(shí)間:2020年06月01日 11:19:30   作者:二萌偏  
這篇文章主要介紹了easyUI 實(shí)現(xiàn)的后臺(tái)分頁(yè)與前臺(tái)顯示功能,結(jié)合實(shí)例形式分析了easyUI 后臺(tái)數(shù)據(jù)交互、分頁(yè)與前臺(tái)顯示相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了easyUI 實(shí)現(xiàn)的后臺(tái)分頁(yè)與前臺(tái)顯示功能。分享給大家供大家參考,具體如下:

之前我寫過一篇文章,實(shí)現(xiàn) easyui 前臺(tái)分頁(yè),當(dāng)時(shí)使用了分頁(yè)過濾器,鏈接如下:

http://www.dbjr.com.cn/article/187747.htm

后來(lái)考慮到如果后臺(tái)數(shù)據(jù)量龐大,那么用前臺(tái)分頁(yè)是不現(xiàn)實(shí)的,會(huì)很耗時(shí)間,占用系統(tǒng)開銷。這個(gè)時(shí)候就應(yīng)該用到后臺(tái)分頁(yè)了。后臺(tái)分頁(yè)其實(shí)也很簡(jiǎn)單:每次只 sql 語(yǔ)句只查詢前臺(tái)某一頁(yè)需要的數(shù)據(jù)。所以需要前臺(tái)給后臺(tái)傳兩個(gè)數(shù)據(jù):

  • pageNumber:當(dāng)前頁(yè)數(shù)
  • pageSize:當(dāng)前頁(yè)的數(shù)據(jù)條數(shù)。

一、首先在pom.xml中引入分頁(yè)插件:

<!--分頁(yè)-->
<dependency>
  <groupId>com.github.pagehelper</groupId>
  <artifactId>pagehelper</artifactId>
  <version>4.1.6</version>
</dependency>
<dependency>
  <groupId>com.github.jsqlparser</groupId>
  <artifactId>jsqlparser</artifactId>
  <version>0.9.6</version>
</dependency>

這里之前遇到了一個(gè)坑,當(dāng)時(shí)引入了一個(gè)不兼容的分頁(yè)插件版本,然后就一直報(bào)錯(cuò),后來(lái)?yè)Q成這個(gè)就好使了。。

二、前臺(tái) js 代碼(easyUI)

//表格鋪值
$('#dg_question_list').datagrid({
    url: baselocation + '/test/question/allQuestions', //controller地址
    method: 'post',
    //攜帶參數(shù)
    queryParams: {
      pageNum: incubGloPageNumber, // 全局變量,設(shè)置初始值為1
      pageSize: incubGloPageSize // 全局變量,設(shè)置初始值為10
    },
    height: 370,
    border: true,
    fitColumns: false, // 適應(yīng)網(wǎng)格的寬度,防止水平滾動(dòng)
    rownumbers: true, // 顯示一個(gè)行號(hào)列
    nowrap: true, // 數(shù)據(jù)顯示在一行
    singleSelect: true, // 只允許選擇一行
    pagination: true, // 在數(shù)據(jù)表格控件底部顯示分頁(yè)工具欄
    columns: [[{
      field: 'ck',
      checkbox: true,
    }, {
      title: '試題內(nèi)容', //顯示的列名
      field: 'question_content', //和對(duì)象中的名字保持一致
      width: 150 // 寬度 必填?。?!
    }, {
      title: '試題類型', //顯示的列名
      field: 'question_type_value', //和對(duì)象中的名字保持一致
      width: 100 // 寬度 必填!??!
    }, {
      title: '試題答案', //顯示的列名
      field: 'question_answer', //和對(duì)象中的名字保持一致
      width: 100, // 寬度 必填!??!
      sortable: true
    }, {
      title: '試題分值', //顯示的列名
      field: 'question_points', //和對(duì)象中的名字保持一致
      width: 100, // 寬度 必填?。。?
      sortable: true
    }, {
      title: '所屬知識(shí)點(diǎn)', //顯示的列名
      field: 'kp_value', //和對(duì)象中的名字保持一致
      width: 150, // 寬度 必填?。。?
      sortable: true
    }, {
      title: '創(chuàng)建時(shí)間', //顯示的列名
      field: 'question_create_time', //和對(duì)象中的名字保持一致
      width: 150, // 寬度 必填?。?!
      sortable: true
    }, {
      title: '最后修改時(shí)間', //顯示的列名
      field: 'question_modify_time', //和對(duì)象中的名字保持一致
      width: 150, // 寬度 必填?。?!
      sortable: true
    }
    ]],
    loadFilter: function (result) {
      if (result.code == 200) {
        return result.data;
      } else {
        myMsgAlert('錯(cuò)誤', '試卷列表加載失?。?, 'error');
      }
    },
    onClickRow: function (index, row) {
      globalQuestionId = row.id;
      $('#paperInfo_panel').panel('setTitle', '試題信息');
      setOption(row);
    }
});
 
//加載分頁(yè)
$('#dg_question_list').datagrid('getPager').pagination({
    pageSize: 10,
    pageList: [10, 20, 30, 40, 50],
    beforePageText: '第',//頁(yè)數(shù)文本框前顯示的漢字
    afterPageText: '頁(yè)  共 {pages} 頁(yè)',
    displayMsg: '當(dāng)前顯示 {from} - {to} 條記錄  共 {total} 條記錄',
    /**
     * 分頁(yè)查詢
     * @param pageNumber
     * @param pageSize
     */
    onSelectPage: function (pageNumber, pageSize) {
      incubGloPageNumber = pageNumber;
      incubGloPageSize = pageSize;
      incubQueryInfo(pageNumber, pageSize);
 
    }
});

/**
 * 獲取分頁(yè)信息
 * @param pageNumber
 * @param pageSize
 */
function incubQueryInfo(pageNumber, pageSize) {
  var handler = baselocation + '/test/question/allQuestions'
  var opts = $('#dg_question_list').datagrid('options');
  var queryParams = opts.queryParams;
  queryParams.pageNum = pageNumber;
  queryParams.pageSize = pageSize;
  //設(shè)置表格數(shù)據(jù)的來(lái)源URL
  $('#dg_question_list').datagrid('options').url = handler;
  //重新加載表格
  $('#dg_question_list').datagrid('reload');
 
  //行號(hào)累增
  var start = (pageNumber - 1) * pageSize;
  var end = start + pageSize;
  var rowNumbers = $('.datagrid-cell-rownumber');
  $(rowNumbers).each(function (index) {
    var row = parseInt($(rowNumbers[index]).html()) + parseInt(start);
    $(rowNumbers[index]).html("");
    $(rowNumbers[index]).html(row);
  });
 
}

三、后臺(tái)service層代碼:

@Override
public Map<String, Object> selectAllQuestions(Map<String, Object> allQuestionsMap){
    //獲取頁(yè)數(shù)
    int pageNum = Integer.parseInt(allQuestionsMap.get("pageNum").toString());
    //獲取條數(shù)
    int pageSize = Integer.parseInt(allQuestionsMap.get("pageSize").toString());
    //判斷規(guī)格
    pageNum = pageNum == 0 ? 1 : pageNum;
    pageSize = pageSize == 0 ? 10 : pageSize;
    //分頁(yè)插件,要在調(diào)用mapper前就創(chuàng)建
    PageHelper.startPage(pageNum, pageSize);
 
    List<Map> questionList = testQuestionsMapper.selectAllQuestions(allQuestionsMap);
 
    PageInfo pageInfo = new PageInfo(questionList);
 
    Map<String, Object> resultMap = new HashMap<>();
    resultMap.put("total", pageInfo.getTotal());//easyui框架需要這個(gè)total數(shù)據(jù)來(lái)計(jì)算一共有多少頁(yè)
    resultMap.put("rows", pageInfo.getList());//rows里面放的是一頁(yè)中的所有數(shù)據(jù)
    return resultMap;
 
}

注意:這里easyui如果用queryParams給后臺(tái)傳遞參數(shù)的話,controller層接收數(shù)據(jù)的時(shí)候應(yīng)該一個(gè)一個(gè)接收:

//根據(jù)條件搜索試題
@RequestMapping(value = "/allQuestions", method = RequestMethod.POST)
@ResponseBody
public Map<String,Object> selectAllQuestions(
                     @RequestParam(value = "pageNum") int pageNumber,
                     @RequestParam(value = "pageSize") int pageSize
)

然后再把它們一個(gè)一個(gè)放到map里面,傳給service層

Map<String,Object> allQuestionsMap = new HashMap<>();
    allQuestionsMap.put("pageNum",pageNumber);
    allQuestionsMap.put("pageSize",pageSize);

sql語(yǔ)句不用變動(dòng)。

到此,后臺(tái)分頁(yè),前臺(tái)easyui顯示就可以實(shí)現(xiàn)了。。本人親測(cè)好使,大家如果認(rèn)為有哪里不妥的地方,歡迎指正錯(cuò)誤。按照本文一步一步最后沒實(shí)現(xiàn)的也可以來(lái)找我討論。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論