EasyUI中datagrid的基本用法

EasyUI中datagrid是最常用的一个控件了，现在整理一下datagrid的基本语法，先展示下页面效果吧,如下图

一、先在页面写入一个table标签，ID设置成td_Cfm

    <table id="td_Cfm"></table>

二、在javascript中写入基本语法

    <script type="text/javascript">
        $(document).ready(function () {
            var State = "";
            $('#td_Cfm').datagrid({
                striped: true,
                url: 'AjaxHandler/RadioCfmManager.ashx?Action=Load',
                border: true,//边框
                iconCls: 'icon-edit', //图标
                singleSelect: true,//只允许选择一行
                autoRowHeight: false,//自适应行高度
                rownumbers: true,//显示行号
                fitColumns: true,//自适应列
                fit: false,//自适应
                pagination: true, //是否分页
                toolbar: [//显示按钮
                    {
                        id: 'Add', text: '添加', iconCls: 'icon-add', handler: function () {
                            State = "Add";
                            $('#FmDialog').dialog('open');
                        }
                    }, '-',
                    {
                        id: 'Edit', text: '修改', iconCls: 'icon-edit', handler: function () {
                            var rows = $('#td_Cfm').datagrid('getSelected');
                            if (rows) {
                                $("#cmbMarketID").combobox('setValue', rows.CNETWORK);
                                $("#txtCFmName").textbox('setValue', rows.CFM_CNAME);
                                $("#txtEFmName").textbox('setValue', rows.CFM_ENAME);
                                $("#cmbFmType").combobox('setValue', rows.CGROUP_ID);
                                $("#txtFmCode").textbox('setValue', rows.CFM_CODE);
                                State = "Edit";
                                $('#FmDialog').dialog('open');
                            }
                            else { $.messager.alert('提示', '请选择要修改的数据'); return; }
                        }
                    }, '-',
                     {
                         id: 'Del', text: '删除', iconCls: 'icon-remove', handler: function () {
                             var url = "AjaxHandler/RadioCfmManager.ashx?Action=Del";
                             DelClick(url);
                         }
                     }
                ],
                columns: [[//列字段
                { field: 'CNETWORK', title: '调查地区',  50 },
                { field: 'CFM_ID', title: 'FMID',  50 },
                { field: 'CFM_CNAME', title: '频道',  50 },
                { field: 'CFM_ENAME', title: '节目名称',  50 },
                { field: 'CGROUP_NAME', title: '频率类型',  50 },
                { field: 'CFM_CODE', title: 'FM编码',  50, hidden: true },
                { field: 'CGROUP_ID', title: '频率类型ID',  50, hidden: true },
              ]]
            });
            //设置分页控件 
            var p = $('#td_Cfm').datagrid('getPager');
            $(p).pagination({
                pageSize: 10, //每页显示的记录条数，默认为10 
                pageList: [10, 20, 30], //可以设置每页记录条数的列表 
                beforePageText: '第', //页数文本框前显示的汉字 
                afterPageText: '页    共 {pages} 页',
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
            });
        })
    </script>

三、在页面中定义，按钮弹框的Dialog

    <div id="FmDialog" class="easyui-dialog" title="频率管理">
        <table>
            <tr>
                <th>
                    调查地区：
                </th>
                <td>
                    <input id="cmbMarketID" class="easyui-combobox" name="dept" data-options="editable:false" />
                </td>
            </tr>
            <tr>
                <th>
                    频道名称：
                </th>
                <td id="FmName">
                    <input class="easyui-textbox" id="txtCFmName" style=" 223px; height: 19px">
                </td>
            </tr>
            <tr>
                <th>
                    FM名称：
                </th>
                <td>
                    <input class="easyui-textbox" id="txtEFmName" style=" 223px; height: 19px">
                </td>
            </tr>
            <tr>
                <th>
                    FM编码：
                </th>
                <td>
                    <input class="easyui-textbox" id="txtFmCode" style=" 223px; height: 19px">
                </td>
            </tr>
            <tr>
                <th>
                    频率类型：
                </th>
                <td>
                    <input id="cmbFmType" class="easyui-combobox" name="cmbFmType" data-options="editable:false" />
                </td>
            </tr>
            <asp:HiddenField ID="hiddenUserId" runat="server" />
        </table>
    </div>

四、在javascript中，加入按钮的具体操作

            //删除事件
            function DelClick(url) {
                var selected = $('#td_Cfm').datagrid('getSelected');
                if (selected) {
                    $.messager.confirm('信息提示', '确定要删除该信息吗?', function (r) {
                        if (!r) {
                            return;
                        }
                        var FmID = selected.CFM_ID;
                        $.post(url, { "FmID": FmID }, function (result) {
                            if ("success" == result) {
                                $.messager.alert("信息提示", "删除成功！");
                                $("#td_Cfm").datagrid('reload');
                            }
                            else {
                                $.messager.alert("信息提示", result);
                            }
                        })
                    })
                }
                else {
                    $.messager.alert("信息提示", "请先选中要删除的信息！");
                }
            }
            //添加和修改操作
            $('#FmDialog').dialog({
                title: '频率管理',  360, height: 210, closed: true, cache: false, resizable: true, modal: true,
                buttons: [{
                    text: 'Save',
                    iconCls: 'icon-save',
                    handler: function () {
                        var MarketID = $("#cmbMarketID").combobox("getValue");
                        if (MarketID == "") {
                            $.messager.alert("信息提示", "地区不能为空！");
                            return;
                        }
                        var CFmName = $("#txtCFmName").textbox("getValue");
                        if (CFmName == "") {
                            $.messager.alert("信息提示", "频道名称不能为空!");
                        }
                        var EFmName = $("#txtEFmName").textbox("getValue");
                        if (EFmName == "") {
                            $.messager.alert("信息提示", "Fm名称不能为空!");
                        }
                        var FmTypeName = $("#cmbFmType").combobox("getText");
                        if (FmTypeName == "") {
                            $.messager.alert("信息提示", "频率类型不能为空!");
                        }
                        var FmCode = $("#txtFmCode").textbox("getText");
                        if (FmCode == "") {
                            $.messager.alert("信息提示", "FM编码不能为空!");
                        }
                        var FmTypeId = $("#cmbFmType").combobox("getValue");
                        var FmID = "";
                        var rows = $('#td_Cfm').datagrid('getSelected');
                        if (rows) {
                            FmID = rows.CFM_ID;
                        }
                        var UserId = document.getElementById('<%=hiddenUserId.ClientID %>').value;
                        var url = "AjaxHandler/RadioCfmManager.ashx?Action=" + State + "&FmID=" + FmID;
                        $.post(url, { "MarketID": MarketID, "CFmName": CFmName, "EFmName": EFmName,
                            "FmTypeName": FmTypeName, "FmTypeId": FmTypeId, "FmCode": FmCode, "UserId": UserId
                        }, function (result) {
                            if ("success" == result) {
                                $.messager.alert("信息提示", "操作成功！");
                                $('#FmDialog').dialog('close');
                                $("#cmbMarketID").combobox('setValue', "");
                                $("#txtCFmName").textbox('setValue', "");
                                $("#txtEFmName").textbox('setValue', "");
                                $("#cmbFmType").combobox('setValue', "");
                                $("#txtFmCode").textbox('setValue', "");
                                $("#td_Cfm").datagrid('reload');
                            }
                        })
                    }
                }, {
                    text: 'Close',
                    iconCls: 'icon-cancel',
                    handler: function () {
                        $('#FmDialog').dialog('close');
                        $("#cmbMarketID").combobox('setValue', "");
                        $("#txtCFmName").textbox('setValue', "");
                        $("#txtEFmName").textbox('setValue', "");
                        $("#cmbFmType").combobox('setValue', "");
                        $("#txtFmCode").textbox('setValue', "");
                    }
                }]
            });

五、展示一下弹框效果

点击添加

点击修改

六、简单整理一下，这个页面用到的知识点

控件赋值和提示消息

var rows = $('#td_Cfm').datagrid('getSelected');//得到选择行信息
      if (rows) {
          $("#cmbMarketID").combobox('setValue', rows.CNETWORK);//得到选中行的CNETWORK信息，赋值给cmbMarketID控件
          $("#txtCFmName").textbox('setValue', rows.CFM_CNAME);
          $("#txtEFmName").textbox('setValue', rows.CFM_ENAME);
          $("#cmbFmType").combobox('setValue', rows.CGROUP_ID);
          $("#txtFmCode").textbox('setValue', rows.CFM_CODE);
          $('#FmDialog').dialog('open');//打开对话框
        }
         else { $.messager.alert('提示', '请选择要修改的数据'); return; }//如果未选中行，则弹框提示。

提示信息和ajax的使用

  var selected = $('#td_Cfm').datagrid('getSelected');//得到选中行信息
       if (selected) {
          $.messager.confirm('信息提示', '确定要删除该信息吗?', function (r) {//增加提示信息
           if (!r) {
               return;
            }
            var FmID = selected.CFM_ID;
            $.post(url, { "FmID": FmID }, function (result) {//通过post方式传值给URL页面，result是返回值，我后台定义的是，执行成功返回success，这个值是根据自己习惯定义的
                 if ("success" == result) {
                  $.messager.alert("信息提示", "删除成功！");
                  $("#td_Cfm").datagrid('reload');//执行成功后，刷新
                  }
                  else {
                        $.messager.alert("信息提示", result);
                   }
                })
            })

控件值得的获取和非空提示

 var MarketID = $("#cmbMarketID").combobox("getValue");//得到控件cmbMarketID的值
    if (MarketID == "") {
       $.messager.alert("信息提示", "地区不能为空！");提示不能为空
       return;
    }