gridx的使用

本文详细介绍了如何利用gridx库给Grid分页插件绑定事件,实现动态更新分页栏的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

gridx的使用,主要是绑定事件,给grid的pagination插件绑定事件。

效果如下:


<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'gridxTest.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    
    <link rel="stylesheet" type="text/css" href="js/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="js/gridx/resources/claro/Gridx.css" />
    <style type="text/css">
        /*applied to a single gridx instance by ID*/
        #gridContainer {
            width: 600px;
            height: 300px;
        }
    </style>
    <script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    <script type="text/javascript">
    require([
             "dojo/on",
             "gridx/Grid",
             "gridx/core/model/cache/Async",
             "gridx/modules/VirtualVScroller",
             "gridx/modules/ColumnResizer",
             "gridx/modules/extendedSelect/Row",
             "gridx/modules/SingleSort",
             "gridx/modules/RowHeader",
             "gridx/modules/IndirectSelect",
             "gridx/modules/Pagination",
             "gridx/modules/pagination/PaginationBar",
             "dojo/store/JsonRest",
             "dojo/data/ItemFileWriteStore",
             'dojo/_base/lang',
             "dojo/domReady!"
         ], function(on, Grid, Cache,
             VirtualVScroller, ColumnResizer, SelectRow,
             SingleSort, RowHeader, IndirectSelect,
             Pagination, PaginationBar, Store, ItemFileWriteStore, lang){

             //Create store here...
             //var store = new Store({
             //    target:"student/list"
             //});
             var data = {
                       identifier: "id",
                       items: []
                     };
                 var data_list = [
                   { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
                   { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
                   { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
                 ];
                 var rows = 60;
                 for(var i = 0, l = data_list.length; i < rows; i++){
                     data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
                 }
             var store = new ItemFileWriteStore({
                 data: data
             });

             var grid = new Grid({
                 store: store,
                 cacheClass: Cache,
                 structure:[
                     //{field:"id", name:"id", width:"50px"},
                     //{field:"name", name:"用户名", width:"50px"},
                     {'name': 'Column 1', 'field': 'id', 'width': '100px'},
                  {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
                  {'name': 'Column 3', 'field': 'col3', 'width': '200px'},
                  {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
                 ],
                 selectRowTriggerOnCell: true,
                 modules: [
                     VirtualVScroller,
                     ColumnResizer,
                     SelectRow,
                     SingleSort,
                     RowHeader,
                     IndirectSelect,
                     Pagination,
                     PaginationBar,
                 ]
             });
             
             grid.placeAt("gridContainer");
             grid.startup();
             
             //这段代码可行,但感觉方法不够合适
             //grid.pagination.onSwitchPage = function(currentPage, originalPage){
             //    this.grid.paginationBar.refresh();
             //}
             
             //console.log(grid);
             //on(grid, "switchPage", function(){
             //    alert("123456");
             //});
             
             //console.log(grid);
             
             //console.log(grid);
             //console.log("Pagination.grid::::::"+grid.pagination.grid);
             //grid.pagination.connect("onSwitchPage", function(){
             //    alert("5555555");
             //});
             //console.log(grid);
             
             //这段代码会好点,但是换成on的话就更好了
             grid.pagination.connect(grid.pagination, "onSwitchPage", function(){
                 alert("aaaaaaaa");
             });
             
         });
    </script>
    
  </head>
 
  <body class="claro">
    <div id="gridContainer"></div>
  </body>
</html>


JPanel panel = new JPanel(new GridBagLayout()); GridBagConstraints constraints = new GridBagConstraints(); constraints.insets = new Insets(10, 10, 10, 10); JLabel usernameLabel = new JLabel("用户名:"); constraints.gridx = 0; constraints.gridy = 0; panel.add(usernameLabel, constraints); usernameField = new JTextField(20); constraints.gridx = 1; constraints.gridy = 0; panel.add(usernameField, constraints); JLabel passwordLabel = new JLabel("密码:"); constraints.gridx = 0; constraints.gridy = 1; panel.add(passwordLabel, constraints); passwordField = new JPasswordField(20); constraints.gridx = 1; constraints.gridy = 1; panel.add(passwordField, constraints); JLabel confirmPasswordLabel = new JLabel("确认密码:"); constraints.gridx = 0; constraints.gridy = 2; panel.add(confirmPasswordLabel, constraints); confirmPasswordField = new JPasswordField(20); constraints.gridx = 1; constraints.gridy = 2; panel.add(confirmPasswordField, constraints); JLabel phoneLabel = new JLabel("手机号:"); constraints.gridx = 0; constraints.gridy = 3; panel.add(phoneLabel, constraints); phoneField = new JTextField(20); constraints.gridx = 1; constraints.gridy = 3; panel.add(phoneField, constraints); JLabel genderLabel = new JLabel("性别:"); constraints.gridx = 0; constraints.gridy = 4; panel.add(genderLabel, constraints); maleButton = new JRadioButton("男"); femaleButton = new JRadioButton("女"); ButtonGroup genderGroup = new ButtonGroup(); genderGroup.add(maleButton); genderGroup.add(femaleButton); JPanel genderPanel = new JPanel(new FlowLayout()); genderPanel.add(maleButton); genderPanel.add(femaleButton); constraints.gridx = 1; constraints.gridy = 4; panel.add(genderPanel, constraints); registerButton = new JButton("注册"); constraints.gridx = 1; constraints.gridy = 5; panel.add(registerButton, constraints);提取成一个方法
06-02
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值