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

一丶常用属性

     $('#j_dg_left').datagrid({
                 url: '/Stu_Areas/Stu/GradeList',
                 fit: true, // 自动适应父容器大小
                 singleSelect: true, //设置是否只能单选
                 loadMsg: '请稍等，正在拼命加载...',//加载数据的时候显示提示消息
                 fitColumns: true, //自动收缩列的大小
                 rownumbers: true, //是否加行号
         　　　   pagination: true, //是否显式分页
                 pageSize: 5, //页容量，必须和pageList对应起来，否则会报错
                 pageNumber: 1, //默认显示第几页
                 pageList: [5, 10, 15],//分页中下拉选项的数值
                 checkOnSelect: true,//当用户点击行的时候该复选框就会被选中或取消选中。
                 selectOnCheck: true,//单击复选框将永远选择行
                 //固定列
                 frozenColumns: [[
                      { field: 'gName', title: '年级名称', width:150, align: 'center' },
                 ]],
                 //非固定列
                 columns: [[
                      { field: 'gExplain', title: '年级说明', width: 150, align: 'center' },
                 ]],
                 //单击单元格
                 onClickRow: function (index, row) {
                     dg_right.datagrid('load', {
                         gId: row.gId,
                     });
                     gId = row.gId;
                 },
                 onLoadSuccess: function () {
                     //修改全选按钮
                     $(".datagrid-header-check").html("序号");
                     $(".datagrid-header-check").parent().prev().html("");
                     $(".datagrid-header-check").attr("style", "width:71px")
                     var rows = dg_left.datagrid('getRows');
                     if (rows.length > 0) {
                         pageUtil.LoadGrid_Right(rows[0].gId);
                     }
                 },
                 toolbar: [{
                     text: '刷新',
                     iconCls: 'fa fa-refresh',
                     handler: function () {
                         pageUtil.Refresh();
                     }
                  }
                  ,
                   '-', {
                       text: '取消选中',
                       iconCls: 'fa fa-undo',
                       handler: function () {
                           pageUtil.CancelSelected();
                       }
                   },
                    '-', {
                        text: '添加',
                        iconCls: 'fa fa-plus',
                        handler: function () {
                            pageUtil.AddStudent();
                        }
                    },
                    '-', {
                        text: '编辑',
                        iconCls: 'fa fa-edit',
                        handler: function () {
                            pageUtil.EditStudent();
                        }
                    },
                   '-', {
                       text: '删除',
                       iconCls: 'fa fa-remove',
                       handler: function () {
                           pageUtil.DelStudent();
                       }
                   },
                 ],
     })

内容:

{
     title: '内容说明', field: 'ContentRemark', align: 'center', width: , sortable: true,
                   formatter: function (value) {
                       if (value) {
                           value = value.replace(/<[^>]*>/ig, "");
                           value = value.replace(/&(nbsp|#);/ig, "");
                           if (value.length > ) {
                               value = value.substring(, ) + "......";
                           }
                           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 < ) {  // 如果编辑器中的数据已经修改，则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');
                        }
                    }
                })
            }

三丶默认选择

   //选中事件
                 onSelect: function (index, row) {
                     dgStaff.datagrid('load', {
                         id: row.id,
                     });
                 },

                 onLoadSuccess: function (data) {
                     //修改全选按钮
                     $(".datagrid-header-check").html("序号");
                     $(".datagrid-header-check").parent().prev().html("");
                     $(".datagrid-header-check").attr("style", "width:79px !important;font-weight: 700;font-size: 14px;line-height:18px;");

                     if (data != "" && data.total > ) {
                         dgDepartment.datagrid("selectRow", );
                     }

                 },
             });

onSelect

四丶初始化下拉框

                 var demoData = oc.BllSession.ISysDemoBLL.Entities.Select(a => new ComoboData
                 {
                     value = a.id,
                     text = a.departName,
                 }).ToList();

                 demoData.Insert(, new ComoboData
                 {
                     value = "",
                     text = "全部",
                 });
                 return Json(demoData );    

js

            $('#j_departId').combobox({
                 editable: false,
                 height: 30,
                 url: '远程路径/控制器相对路径',
                 panelHeight: 'auto',
                 panelMaxHeight: 220,
                 valueField: 'value',
                 textField: 'text',
                 onSelect: function (rec) {
                     if (rec.value == "") {
                         $('#departName').val("");
                     } else {
                         $('#departName').val(rec.text);
                     }
                 }
             });