extjs grid

最新推荐文章于 2021-07-06 11:16:27 发布
czhaozhi3758
最新推荐文章于 2021-07-06 11:16:27 发布
阅读量150
点赞数
分类专栏： extjs 文章标签： EXT 数据结构
本文链接：https://blog.csdn.net/czhaozhi3758/article/details/83875536
版权
extjs 专栏收录该内容
17 篇文章 0 订阅
订阅专栏

<html>
<head>
<meta charset="UTF-8" />
<title>grid</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../extjs/src/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<div id="a"></div>
<script>
// 勾选模型
var sm = new Ext.grid.CheckboxSelectionModel({
  singleSelect: false
  //singleSelect设置为true，则应用到grid之后只能单选，默认为false
});

// 列模型----1 ：定义表头
var cm = new Ext.grid.ColumnModel([
  new Ext.grid.RowNumberer(),// Ext封装的特殊类，用于显示行号
  sm,
  {
    id : "title",
    header : "标题", //列头文字说明
    width : 150,
	sortable : true, //排序
    dataIndex : "title_cm",//记录结构中的name属性值
    tooltip : "文章标题",
    renderer : function(v) { //自定义单元格内容
      return "<u>" + v + "</u>";// renderer方法，可组合jsonObj内多个属性一次返回
    }
  }, {
    header : "作者",
    width : 50,
    dataIndex : "author"
  }, {
    header : "创建时间",
    width : 150,
    format : "Y-m-d",
    dataIndex : "createdTime",
    renderer : Ext.util.Format.dateRenderer("Y-m-d")
  }, {
    header : "操作",
    width : 100,
    dataIndex : "rowId",
    menuDisabled : true,//单击列头是否出现菜单,false 出现
    renderer : function(v) {
      var modify = "<a href='modify?newsId=" + v + "'>修改</a>";
      var remove = "<a href='delete?newsId=" + v + "'>删除</a>";
      return "<span align='center'>" + modify + " " + remove
      + "</span>";
    }
  }]);

// Dummy数据
var data = {"totalProperty":5,"root":[{
  rowId : 5,
  title : "论雷峰塔的倒掉",
  author : "鲁迅",
  createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
  rowId : 2,
  title : "背影",
  author : "朱自清",
  createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
  rowId : 3,
  title : "鲁提辖拳打镇关西",
  author : "施耐庵",
  createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
  rowId : 1,
  title : "沁园春 雪",
  author : "毛 泽 东",
  createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
  rowId : 4,
  title : "蜀道难",
  author : "李白",
  createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}]};

// 代理，使用Dummy数据
var proxy = new Ext.data.MemoryProxy(data);

// Record 定义记录结果---2：定义数据集
var News = Ext.data.Record.create([{
  name : "title_cm", //和cm中dataIndex对应
  type : "string",
  mapping : "title"//和data中的 title对应
},
// 每个元素的name属性必须与data里的属性字段相同，包括大小写，否则读不出数据且不会报错
{
  name : "author",
  type : "string",
  mapping : "author"
}, {
  name : "createdTime",
  type : "string",
  mapping : "createdTime"
}, {
  name : "rowId",
  mapping : "rowId"
}]);

// Reader
var reader = new Ext.data.JsonReader({totalProperty:"totalProperty",root:"root"}, News);

// Store ---3：存取数据
var store = new Ext.data.Store({
  proxy : proxy,
  reader : reader
});
store.load({params:{start:0,limit:2}});

Ext.onReady(function() {

  var grid = new Ext.grid.GridPanel({
    title : "新闻列表",
    width : 500,
    autoHeight : true,
    cm : cm,
    sm : sm,
    //如果只在ColumnModel中加sm而不在grid构造中加，有以下后果：
    //1.不能实现多选；
    //2.不能实现标题行的CheckBox被选中时全选
    store : store,
    renderTo : "a",
    autoExpandColumn : "title",
    tbar : [{
      text : "删除选定行",
      icon : "../extjs/resources/images/default/dd/drop-no.gif",
      cls : "x-btn-text-icon",
      handler : function() {
        var rsm = grid.getSelectionModel();
        var view = grid.getView();
        var store = grid.getStore();
        for (var i = view.getRows().length - 1; i >= 0; i--) {
          if (rsm.isSelected(i)) {
            store.remove(store.getAt(i));
          }
        }
        view.refresh();
      }
    }, {
      text : "删除所有行",
      icon : "../extjs/resources/images/default/dd/drop-no.gif",
      cls : "x-btn-text-icon",
      handler : function() {
        Ext.Msg.confirm("警告", "确定要删除所有数据么？", function (btn) {
          if (btn == "yes") {
            var store = grid.getStore();
            store.removeAll();
            grid.getView().refresh();
          }
        })
      }
    }, '-', { //'-'为间隔标志符号| '->'左右间隔
      text : "新建内容",
      icon : "../extjs/resources/images/default/dd/drop-add.gif",
      cls : "x-btn-text-icon",
      handler : function() {
        Ext.Msg.prompt("新建", "标题：", function (btn, txt) {
          var newItem = {
            title : txt,
            author : "Kong",
            createdTime : new Date()
          }
          var news = new News(newItem);
          grid.getStore().insert(0, news); //插入到行首、grid.getStore().add(news);插入到行尾
          grid.getView().refresh();//刷新
        })
      }
    }, {
      text : "获取指定行内容",
      icon : "../extjs/resources/images/default/dd/drop-yes.gif",
      cls : "x-btn-text-icon",
      handler : function() {
        var rsm = grid.getSelectionModel();// 
        for (var i = 0; i < grid.getView().getRows().length; i++) {
          if (rsm.isSelected(i)) {
            var record = grid.getStore().getAt(i);
            var title = record.get("title_cm");
            var author = record.get("author");
            var createdTime = record.get("createdTime");
            var rowId = record.get("rowId");
            Ext.Msg.alert("Info", title + "<br/>" + author + "<br/>" + createdTime + "<br/>" + rowId);
          }
        }
      }
    }, {
      text : "修改",
      icon : "../extjs/resources/images/default/dd/drop-yes.gif",
      cls : "x-btn-text-icon",
      handler : function() {
        var rsm = grid.getSelectionModel();
		if(rsm.getCount()==1){
		   var r = rsm.getSelected();

		   //alert(r.get("title_cm"));
		   // for (var i = 0; i < grid.getView().getRows().length; i++) {
           // if (rsm.isSelected(i)) {
		   //   alert(grid.getStore().getAt(i).get("title_cm"));
		   //}
		   //} 
		}else{
		   Ext.Msg.alert("提示","请选择一行进行修改！");
		}
     }
    }],
	bbar:new Ext.PagingToolbar({ 
	   pageSize:2, 
	   store:store,
	   displayInfo:true, 
	   displayMsg:'显示第{0}数据到{1},一共有{2}条', 
	   emptyMsg:'没有记录' 
  }), 
    buttonAlign : "right",
    buttons : [{
      text : "第一行",
      handler : function() {
        var rowSelectModel = grid.getSelectionModel();
        //得到行选择模型
        rowSelectModel.selectFirstRow();
      }
    }, {
      text : "上一行",
      handler : function() {
        var rsm = grid.getSelectionModel();
        if (!rsm.hasPrevious()) {
          Ext.Msg.alert("警告", "已到达第一行");
        } else {
          rsm.selectPrevious();
        }
      }
    }, {
      text : "下一行",
      handler : function() {
        var rsm = grid.getSelectionModel();
        if (rsm.hasNext()) {
          rsm.selectNext();
        } else {
          Ext.Msg.alert("警告", "已到达最后一行");
        }
      }
    }, {
      text : "全选",
      handler : function() {
        var rsm = grid.getSelectionModel();
        rsm.selectAll();
      }
    }, {
      text : "全不选",
      handler : function() {
        var rsm = grid.getSelectionModel();
        rsm.deselectRange(0, grid.getView().getRows().length - 1);
      //grid.getView().getRows().length 可以获得表格的总行数
      //注意：Ext.grid.RowSelectionModel的getCount方法返回的是选择的总行数
      }
    }, {
      text : "反选",
      handler : function() {
        var rsm = grid.getSelectionModel();
        for (var i = grid.getView().getRows().length - 1; i >= 0; i--) {
          if (rsm.isSelected(i)) {
            rsm.deselectRow(i);
          } else {
            rsm.selectRow(i, true);
          //selectRows方法为选取多行，第二个参数表示为保持现有的选区状态
          //如果只是用rsm.selectRow(i)，则每次都会选择第一行
          }
        }
      }
    }]
  });

   //store.load({params:{start:0, limit:3}});
});

</script>


</body>
</html>