GRID选择列

来源：互联网发布：形势与政策网络强国编辑：程序博客网时间：2024/05/08 08:02

页面代码:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server">    <title>GridEasy</title>    <link rel="stylesheet" type="text/css" href="../../Components/Extjs4.0/resources/css/ext-all.css" />    <script type="text/javascript" src="../../Components/Extjs4.0/ext-all.js"></script></head><body>    <script type="text/javascript">        Ext.Loader.setPath('Ext.ux', '../../Components/ux');        Ext.require([    'Ext.grid.*',    'Ext.data.*']);        Ext.onReady(function () {            Ext.define('MyData', {                extend: 'Ext.data.Model',                fields: [                //第一个字段需要指定mapping，其他字段，可以省略掉。             {name: 'UserName', mapping: 'UserName' },             'Sex',             'Age',             'XueHao',             'BanJi'        ]            });            //创建数据源             var store = Ext.create('Ext.data.Store', {                model: 'MyData',                proxy: {                    //异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可                     type: 'ajax',                    url: 'GetTestData?param=sheng',                    reader: {                        type: 'json',                        root: 'items'//,                         //totalProperty  : 'total'                     }                },                autoLoad: true            });            //创建Grid             var grid = Ext.create('Ext.grid.Panel', {                store: store,                columns: [            { text: "姓名", width: 120, dataIndex: 'UserName', sortable: true },            { text: "性别", flex: 1, dataIndex: 'Sex', sortable: false },            { text: "年龄", width: 100, dataIndex: 'Age', sortable: true },            { text: "学号", width: 100, dataIndex: 'XueHao', sortable: true },            { text: "班级", width: 100, dataIndex: 'BanJi', sortable: true },               { xtype: 'actioncolumn', //Ext.grid.column.Action动作列                      items: [{                       icon: 'images/edit.gif', //指定编辑图标资源的URL                           handler: function (grid, rowIndex, colIndex) {                           //获取被操作的数据记录                              var rec = grid.getStore().getAt(rowIndex);                           alert("编辑 " + rec.get('name'));                       }                   }, {                       icon: 'images/del.gif', //指定编辑图标资源的URL                           handler: function (grid, rowIndex, colIndex) {                           var rec = grid.getStore().getAt(rowIndex);                           alert("删除 " + rec.get('name'));                       }                   }, {                       icon: 'images/save.gif', //指定编辑图标资源的URL                           handler: function (grid, rowIndex, colIndex) {                           var rec = grid.getStore().getAt(rowIndex);                           alert("保存 " + rec.get('name'));                       }                   }]               }        ],                title: 'ExtJS4 Grid示例',                selModel: { selType: 'checkboxmodel' },                multiSelect: true,                columnLines: true,                renderTo: 'demo',                viewConfig: { stripeRows: true }            });            Ext.define('MyApp.view.ui.MyButton', {                extend: 'Ext.button.Button',                text: 'MyButton',                initComponent: function () {                    var me = this;                    me.callParent(arguments);                }            });            var button1 = new MyApp.view.ui.MyButton(            {                renderTo: 'button1',                handler: function () {                    var msg = '';                    var rows = grid.getSelectionModel().getSelection();                    for (var i = 0; i < rows.length; i++) {                        msg = msg + rows[i].get('UserName') + '\n';                    }                    alert(msg);                }            }            );        });    </script>    <div id="button1">    </div>    <div id="demo">    </div></body></html>

Controller代码

        [AcceptVerbs(HttpVerbs.Get)]        public JsonResult GetTestData()        {            string[] strNameFirst = new string[]{"张","黄","李","泰","刘","王","于","曹"};            string[] strNameLast = new string[] { "极", "辰", "表", "检", "药", "城", "林", "五" };            List<TestModel1> listModel = new List<TestModel1>();            for (int i = 0; i < 100; i++)            {                 listModel.Add(new TestModel1()                {                    UserID = i.ToString(),                    UserName = strNameFirst[new Random(i).Next(0, strNameFirst.Length - 1)] + strNameLast[new Random(i + 1).Next(0, strNameLast.Length - 1)],                    Sex = i%2==0?"男":"女",                    Age = new Random(i).Next(20,29).ToString(),                    XueHao = i.ToString(),// "00" + new Random(i).Next(1, 5).ToString(),                    BanJi = i%2==0?"计算机":"艺术系"                });             }            return Json(listModel, JsonRequestBehavior.AllowGet);        }