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; }