zoukankan      html  css  js  c++  java
  • JQuery UI

    View Code
      <script type="text/javascript">
            $(function () {
                $('#test').datagrid({
                    title: 'My DataGrid', // 标题
                    iconCls: 'icon-save', //头图片
                     730,
                    height: 350,
                    nowrap: false, //是否在一行显示数据
                    striped: true, //是否显示斑马线 默认false
                    collapsible: true, //datagrid 是否可收缩
                    loadMsg: "正在加载.....", //加载数据等待的提示消息
                    url: '/Home/datagridJosn', //请求路径
                    sortName: 'code', //排序字段
                    sortOrder: 'desc', //排序方式
                    remoteSort: false, //是否可排序
                    idField: 'code', //字段
                    frozenColumns: [[  //固定在左侧 比变动 ,checkbox:是否显示选择框,sortable:是否允许该列排序
                        {field: 'ck', checkbox: true },
                        { title: '编号', field: 'code',  80, sortable: true }
                    ]],
                    columns: [[
                        { title: '基本信息', colspan: 3 },
                        { field: 'id', title: '操作',  100, align: 'center', rowspan: 2,
                            formatter: function (value, rec, rowIndex) {
                                //Html.ActionLink("删除","delete") 
    
                                var sss = "<span><a href='/Home/delete?id=" + value + "'>删除</a> </span>";
    
                                return sss;
                                //   return '<span style="color:red">编辑 @Html.ActionLink("删除","delete")  </span>';
                            }
                        }
                    ], [
                        { field: 'name', title: '名称',  120 },
                        { field: 'addr', title: '地址',  220, rowspan: 2, sortable: true,
                            sorter: function (a, b) {
                                return (a > b ? 1 : -1);
                            }
                        },
                        { field: 'col4', title: 'Col41',  150, rowspan: 2 }
                    ]],
                    pagination: true, //是否显示底部分页工具栏
                    rownumbers: true, //是否显示行号列
                    toolbar: [{
                        id: 'btnadd',
                        text: '添加',
                        iconCls: 'icon-add',
                        handler: function () {
                            $('#btnsave').linkbutton('enable');
                            alert('add')
                        }
                    }, {
                        id: 'btncut',
                        text: '剪切',
                        iconCls: 'icon-cut',
                        handler: function () {
                            $('#btnsave').linkbutton('enable');
                            alert('cut')
                        }
                    }, '-', {
                        id: 'btnsave',
                        text: '保存',
                        disabled: true,
                        iconCls: 'icon-save',
                        handler: function () {
                            $('#btnsave').linkbutton('disable');
                            alert('save')
                        }
                    }]
                });
                var p = $('#test').datagrid('getPager');
                $(p).pagination({
                    onBeforeRefresh: function () {
                        alert('before refresh');
                    }
                });
            });
            function resize() {
                $('#test').datagrid('resize', {
                     700,
                    height: 400
                });
            }
            function getSelected() {
                var selected = $('#test').datagrid('getSelected');
                if (selected) {
                    alert(selected.code + ":" + selected.name + ":" + selected.addr + ":" + selected.col4);
                }
            }
            function getSelections() {
                var ids = [];
                var rows = $('#test').datagrid('getSelections');
                for (var i = 0; i < rows.length; i++) {
                    ids.push(rows[i].code);
                }
                alert(ids.join(':'));
            }
            function clearSelections() {
                $('#test').datagrid('clearSelections');
            }
            function selectRow() {
                $('#test').datagrid('selectRow', 2);
            }
            function selectRecord() {
                $('#test').datagrid('selectRecord', '002');
            }
            function unselectRow() {
                $('#test').datagrid('unselectRow', 2);
            }
            function mergeCells() {
                $('#test').datagrid('mergeCells', {
                    index: 2,
                    field: 'addr',
                    rowspan: 2,
                    colspan: 2
                });
            }
        </script>
    View Code
            public ActionResult DataGrid()
            {
    
                return View();
            }
    
    
            public string datagridJosn()
            {
    
    
                //            string json = @"{
                //                  ""total"":""239"",
                //                   ""rows"":[{""code"":""001"",""name"":""ma"",""addr"":""address"",""col4"":""date""}]
                //                }".Replace("@\r\n",string.Empty);
    
    
                DatagridModel model = new DatagridModel();
                model.total = 239;
                model.rows.Add(new RowsModel()
                    {
                        id=1,
                        code = "001",
                        col4 = "co22",
                        addr = "address1",
                        name = "张三"
                    }
                    );
                model.rows.Add(new RowsModel()
                {
                    id = 2,
                    code = "002",
                    col4 = "co233",
                    addr = "address1",
                    name = "李四"
                }
        );
                model.rows.Add(new RowsModel()
                {
                    id = 3,
                    code = "003",
                    col4 = "we",
                    addr = "address2",
                    name = "王五"
                }
        );
    
                string result = ToJson(model);
    
                // var jsonsT= Json(result);
    
                return result;
            }
    
    
            public ActionResult delete(int id)
            {
    
    
                return RedirectToAction("DataGrid");
            }
            /// <summary>
            /// JsonSerializer序列化
            /// </summary>
            /// <param name="item">对象</param>
            public string ToJson<T>(T item)
            {
                DataContractJsonSerializer serializer = new DataContractJsonSerializer(item.GetType());
                using (MemoryStream ms = new MemoryStream())
                {
                    serializer.WriteObject(ms, item);
                    return Encoding.UTF8.GetString(ms.ToArray());
                }
            }
    View Code
        public class DatagridModel
        {
            public int total { get; set; }
    
            public List<RowsModel> rows{get;set;}
    
    
            public DatagridModel()
            {
                rows = new List<RowsModel>();
            }
        }
    
        public class RowsModel
        {
    
            public int id { get; set; }
    
            public string code { get; set; }
    
            public string name { get; set; }
    
            public string addr { get; set; }
    
            public string col4 { get; set; }
        }
  • 相关阅读:
    Spring@Profile注解
    day 32 子进程的开启 及其用法
    day 31 udp 协议SOCK_DGRAM
    day 30 客户端获取cmd 命令的步骤
    day 29 socket 理论
    day 29 socket 初级版
    有关 组合 继承
    day 27 多态 接口 类方法 静态方法 hashlib 摘要算法模块
    新式类和经典类的区别
    day 28 hasattr getattr serattr delattr 和带__内置__ 类的内置方法
  • 原文地址:https://www.cnblogs.com/chenxiao/p/2566126.html
Copyright © 2011-2022 走看看