zoukankan      html  css  js  c++  java
  • ExtJs 4 动态加载grid

    Ext.onReady(function() {

        Ext.Ajax.request({
            url: "/Sys_Module/GetGridInfo",
            params: {},
            success: function(response, config) {
                json = Ext.JSON.decode(response.responseText);  //加载grid信息,具体json格式在下面

                var Sys_RolePermissionList;
                var Sys_RolePermissionStore;
                // 功能模块grid展示
                Sys_RolePermissionList = function() {
                    var url = "/Sys_RolePermission/List";
                    //var sm = Ext.create('Ext.selection.RowModel');

                    //grid 填充
                    Ext.define('Sys_RolePermissionGridModel', {
                        extend: 'Ext.data.Model',
                        fields: json.fieldsNames
                    });

                    var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
                        groupHeaderTpl: 'text1: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
                    });

                    //grid获取 json数组
                    Sys_RolePermissionStore = Ext.create('Ext.data.Store', {
                        pageSize: 10,
                        model: 'Sys_RolePermissionGridModel',
                        buffered: true,
                        groupField: 'text1',
                        data: json.data,
                        proxy: {
                            //actionMethods: 'post',
                            type: 'memory'
                            //url: url,
                            //                        reader: {
                            //                            type: 'json',
                            //                            root: 'root',
                            //                            totalProperty: 'totalPorperty'
                            //                        }
                        },
                        sorters: [{
                            property: 'number',
                            direction: 'DESC'
    }]
                        });
                        SaveSys_RolePermissionFn = function() {
                            var rowcount = grid.getStore().getCount();
                            console.log(rowcount);
                            for (i = 0; i < rowcount; i++) {
                                console.log(i);
                                var abc = grid.getView().getNode(i);
                                var childs = abc.children[3].children[0];

                                console.log(childs.childNodes.length);
                                //console.log(childs.innerHTML);
                                for (var j = 0; j < childs.children.length; j++) {
                                    console.log(childs.children[i].value + childs.children[i].checked);
                                }


                                //var cell = grid.getView().getCell(i, 3);
                                //console.log(cell.outerText);

                            }


                        }
                        //grid配置
                        var grid = Ext.create('Ext.grid.Panel', {
                            id: "Sys_RolePermissionPanel",
                            renderTo: "Sys_RolePermissionGrid",
                            layout: "fit",
                            alias: 'widget.methodPanel',
                            columnLines: true,
                            loadMask: true,
                            frame: true,
                            border: false,
                            //selModel: sm,   //选择框
                            height: 400,
                            autoScroll: true,
                            store: Sys_RolePermissionStore,
                            ds: Sys_RolePermissionStore,
                            //sm: sm,
                            columnLines: true,
                            plugins: [rowEditing],
                            //cm: sm,
                            viewConfig: {
                                stripeRows: true,
                                trackOver: true,
                                emptyText: '<div style="color:#999;margin:5px;">当前没有记录显示<div>'
                            },
                            stripeRows: true,
                            tbar: [                     //工具条设置
                         {
                         text: "新增",
                         tooltip: "新增",
                         iconCls: "addicon",
                         handler: SaveSys_RolePermissionFn
    }],
                            columns: json.columModle

                        });
                        //Sys_RolePermissionStore.loadPage(1);
                        grid.render();
                    }
                    Sys_RolePermissionList();

                },
                failure: function() {
                    alert("sdf");

                }
            });
        });

    grid动态加载json为

     //后台返回json数组

    {'action':true,'message':'error!',
      'data':[
      {'number':'1','text1': '3','info1': '4','special1': '5'},
    {'number':'2','text1': '3','info1': '4','special1': '<input type=\'checkbox\' value=\'xx权限\' class=\'abc123\' />xx权限&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   <input type=\'checkbox\' value=\'xx权限\' class=\'abc123\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />'},
    {'number':'3','text1': '3','info1': '4','special1': '<input type=\'checkbox\' value=\'xx权限\' class=\'abc123\' />xx权限&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   <input type=\'checkbox\' value=\'xx权限\' class=\'abc123\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />xx权限    <input type=\'checkbox\' value=\'xx权限\' />'},
    {'number':'4','text1': '3','info1': '4','special1': '5'}
      ],
      'columModle':[
      {'header': '序号','dataIndex': 'number','width':40},
      {'header': '编码','dataIndex': 'text1', editor: {
                        xtype: 'checkbox',
                        cls: 'x-grid-checkheader-editor'
                    }},
      {'header': '名称','dataIndex': 'info1', editor: {
                        xtype: 'checkbox',
                        cls: 'x-grid-checkheader-editor'
                    }},
      {'header': '金额','dataIndex': 'special1','width':300}
      ],
      'fieldsNames':[{name:'number'},{name:'text1'},{name:'info1'},{name:'special1'}]
      }
  • 相关阅读:
    如何使用Jquery 引入css文件
    html如何绘制带尖角(三角)的矩形
    让HTML标签、DIV、SPAN拥有focus事件和blur事件,聚焦和失焦
    html如何引用另一个html的内容
    HTML中块级元素与内联元素有什么区别 ?
    一个js文件如何加载另外一个js文件
    在线工具-程序员的工具箱-在线Cron表达式生成器
    oracle fm格式化
    html如何让label在div中的垂直方向居中显示?
    服务发现框架选型: Consul、Zookeeper还是etcd ?
  • 原文地址:https://www.cnblogs.com/yang0000meng/p/2261151.html
Copyright © 2011-2022 走看看