随笔- 276 文章- 1 评论- 1 阅读- 17万

第一节：EasyUI样式,行内编辑,基础知识

一丶常用属性

 1     $('#j_dg_left').datagrid({
 2                 url: '/Stu_Areas/Stu/GradeList',
 3                 fit: true, // 自动适应父容器大小
 4                 singleSelect: true, //设置是否只能单选
 5                 loadMsg: '请稍等，正在拼命加载...',//加载数据的时候显示提示消息
 6                 fitColumns: true, //自动收缩列的大小
 7                 rownumbers: true, //是否加行号
 8         　　　   pagination: true, //是否显式分页
 9                 pageSize: 5, //页容量，必须和pageList对应起来，否则会报错
10                 pageNumber: 1, //默认显示第几页
11                 pageList: [5, 10, 15],//分页中下拉选项的数值
12                 checkOnSelect: true,//当用户点击行的时候该复选框就会被选中或取消选中。
13                 selectOnCheck: true,//单击复选框将永远选择行
14                 //固定列
15                 frozenColumns: [[
16                      { field: 'gName', title: '年级名称', width:150, align: 'center' },
17                 ]],
18                 //非固定列
19                 columns: [[
20                      { field: 'gExplain', title: '年级说明', width: 150, align: 'center' },
21                 ]],
22                 //单击单元格
23                 onClickRow: function (index, row) {
24                     dg_right.datagrid('load', {
25                         gId: row.gId,
26                     });
27                     gId = row.gId;
28                 },
29                 onLoadSuccess: function () {
30                     //修改全选按钮
31                     $(".datagrid-header-check").html("序号");
32                     $(".datagrid-header-check").parent().prev().html("");
33                     $(".datagrid-header-check").attr("style", "width:71px")
34                     var rows = dg_left.datagrid('getRows');
35                     if (rows.length > 0) {
36                         pageUtil.LoadGrid_Right(rows[0].gId);
37                     }
38                 },
39                 toolbar: [{
40                     text: '刷新',
41                     iconCls: 'fa fa-refresh',
42                     handler: function () {
43                         pageUtil.Refresh();
44                     }
45                  }
46                  ,
47                   '-', {
48                       text: '取消选中',
49                       iconCls: 'fa fa-undo',
50                       handler: function () {
51                           pageUtil.CancelSelected();
52                       }
53                   },
54                    '-', {
55                        text: '添加',
56                        iconCls: 'fa fa-plus',
57                        handler: function () {
58                            pageUtil.AddStudent();
59                        }
60                    },
61                    '-', {
62                        text: '编辑',
63                        iconCls: 'fa fa-edit',
64                        handler: function () {
65                            pageUtil.EditStudent();
66                        }
67                    },
68                   '-', {
69                       text: '删除',
70                       iconCls: 'fa fa-remove',
71                       handler: function () {
72                           pageUtil.DelStudent();
73                       }
74                   },
75                 ],
76     })

View Code

内容:

{
     title: '内容说明', field: 'ContentRemark', align: 'center', width: 350, sortable: true,
                   formatter: function (value) {
                       if (value) {
                           value = value.replace(/<[^>]*>/ig, "");
                           value = value.replace(/&(nbsp|#160);/ig, "");
                           if (value.length > 25) {
                               value = value.substring(0, 15) + "......";
                           }
                           return value;
                       }
                   }
},

修改复选框和序号样式：

                onLoadSuccess: function () {
                    //修改全选按钮
                    $(".datagrid-header-check").html("序号");
                    $(".datagrid-header-check").parent().prev().html("");
                    $(".datagrid-header-check").attr("style", "width:56px");
                },

二丶行内编辑

var editIndex = undefined;定义全局变量

1.单元格触发事件

　　　　　　　　　　onClickCell: function (index, field, value) {
                    if (editIndex == undefined) {
                        if (field == "content") { // 判断是否是field为content列，如果不是固定某列的话，不需要判断
                            $(this).datagrid('beginEdit', index);
                            var ed = $(this).datagrid('getEditor', { index: index, field: field });
                            $(ed.target).focus();
                        }
                        editIndex = index;
                        //alert("点击触发editIndex:" + editIndex);
                    }
                    else if (editIndex != undefined) {//如果不相等，说明已经打开编辑器了，需要关闭编辑器
                        $(this).datagrid('endEdit', editIndex);
                        editIndex = undefined;
                        //alert("关闭编辑器");
                    }
                    //$("#dg").datagrid('onClickRow');
                },

2.关闭编辑器后触发

　　　　　　　　　　onAfterEdit: function (index, row, changes) { // 关闭编辑器后触发
                    var updated = $(this).datagrid('getChanges', 'updated');  // updated 是一个getChanges的属性，可以查看api
                    //alert("onAfterEdit。。" + updated.length);
                    if (updated.length < 1) {  // 如果编辑器中的数据已经修改，则length为1，否则为0，判断是否已经修改数据
                        editRow = undefined;
                        $(this).datagrid('unselectAll');
                        return;
                    } else {
                        // 传值
                        //alert("提交数据");
                        submitForm(index, row, changes);  //这里ajax提交数据的方法
                    }
                },

3.使用ajax提交数据

            function submitForm(index, row, changes) {
                //alert(row.content + "--" + changes.content);  //daliyResultRate
                var Econtent = row.content;  // 当前行中修改的数据值
                if (Econtent == "") {
                    $.messager.alert('提醒', '没有录入数据！');
                    $("#dg").datagrid('reload');
                    return;
                }
                //var r = /^-?[1-9]/;//判断输入的是正整数
                //if (!r.test(resultId)) {
                //    $.messager.alert('提醒', '请输入正整数！');
                //    return;
                //}
                $.ajax({
                    type: "post",
                    async: false,
                    url: "/T1/Edit",
                    data: {
                        "Econtent": Econtent,  //将数据ajax到后台
                        "id": row.id,
                    },
                    success: function (data) {
                        if (data == "true") {
                            alert("保存成功");
                            $("#dg").datagrid('reload');
                        }
                    }
                })
            }

三丶默认选择

 1   //选中事件
 2                 onSelect: function (index, row) {
 3                     dgStaff.datagrid('load', {
 4                         id: row.id,
 5                     });
 6                 },
 7 
 8                 onLoadSuccess: function (data) {
 9                     //修改全选按钮
10                     $(".datagrid-header-check").html("序号");
11                     $(".datagrid-header-check").parent().prev().html("");
12                     $(".datagrid-header-check").attr("style", "width:79px !important;font-weight: 700;font-size: 14px;line-height:18px;");
13 
14                     if (data != "" && data.total > 0) {
15                         dgDepartment.datagrid("selectRow", 0);
16                     }
17 
18                 },
19             });

onSelect

四丶初始化下拉框

 1                 var demoData = oc.BllSession.ISysDemoBLL.Entities.Select(a => new ComoboData
 2                 {
 3                     value = a.id,
 4                     text = a.departName,
 5                 }).ToList();
 6 
 7                 demoData.Insert(0, new ComoboData
 8                 {
 9                     value = "",
10                     text = "全部",
11                 });
12                 return Json(demoData );

View Code

 1            $('#j_departId').combobox({
 2                 editable: false,
 3                 height: 30,
 4                 url: '远程路径/控制器相对路径',
 5                 panelHeight: 'auto',
 6                 panelMaxHeight: 220,
 7                 valueField: 'value',
 8                 textField: 'text',
 9                 onSelect: function (rec) {
10                     if (rec.value == "") {
11                         $('#departName').val("");
12                     } else {
13                         $('#departName').val(rec.text);
14                     }
15                 }
16             });