easyUI 中datagrid控件demo，包括选中一行能读取到数据
来源：互联网 发布：能量矩阵 编辑：程序博客网 时间：2024/06/05 15:32
当上方点击时，下方显示所有详细信息，要利用datagrid的onClickRow方法，此方法自带参数rowIndex和rowData，
查看easyUI的帮助文档如下：
还有form表单的load加载方法来加载rowData，rowData为选中行的数据，如下图所示
源代码如下，jsp页面：
<%@ page pageEncoding="UTF-8"%><!doctype html><html><head><title>安全会议 | 安全管理 | 国信集团</title><%@include file="/common/base.jsp"%><script type="text/javascript"src="${ctx}/common/js/security_management/builder.js"></script></head><body class="easyui-layout overflow_x_auto body_parts2"><%@ include file="../../header.jsp"%><div data-options="region:'center',border:false,minWidth:1366"><div class="easyui-layout" data-options="fit:true"><divdata-options="region:'west',split:false,border:false,width:225,bodyCls:'hasSubMenu'"><div id="SideScroll_01" class="easyui-panel sideNav"data-options="fit:true,border:false"><%@ include file="../safetySide.jsp"%></div></div><div data-options="region:'center',border:false"><div class="easyui-layout" data-options="fit:true"><divdata-options="region:'west',split:false,border:false,width:175,bodyCls:'hasTree'"><div id="SideScroll_02" class="easyui-panel subSideNav"data-options="fit:true,border:false"><ul class="subSideMenu"><li><a href="${ctx}/safetyorg/main">组织结构图</a></li><li><a href="${ctx}/sfyperson/main">人员信息（通讯录）</a></li><li><a href="${ctx}/sfymeetinginfo/main">安全会议</a></li><li class="current"><a href="${ctx}/construManage/main">施工方管理</a></li></ul></div></div><div data-options="region:'center',border:false"><div class="easyui-layout" data-options="fit: true"><div id="SideScroll_03"data-options="region: 'west',border: false, width:200, bodyCls:'sideTree'"><ul id="orgTree" class="easyui-tree"></ul></div><div id="Main"data-options="region:'center',border:false,bodyCls:'mainBg_GreyShadow pt60'"><div class="toolsWrap pdL10"><div class="toolsBox clearfix"><a id="AddNew" href="javascript:void(0);"class="tools_btn bg_ease colL"><span class="btn_add">新增</span></a><a id="DelRecords" href="javascript:void(0);"class="tools_btn bg_ease colL"><span class="btn_del">删除</span></a><a onClick="" href="javascript:void(0);"class="tools_btn bg_ease colL"><span class="btn_import">导入</span></a><a onClick="" href="javascript:void(0);"class="tools_btn bg_ease colL"><span class="btn_export">导出</span></a><div class="mt10 pdL10 colL"><span class="pdR20"><input id="q_txt"class="easyui-searchbox"></span></div></div></div><!-- 此div为通过easyUI加载的列 --><div class="pb25 regionBox"><table id="BuilderDg" class="easyui-datagrid"></table></div><div class="pb25 regionBox"><form id="SfyBuildForm" ><!-- 页面最下面的div --><div id="BuilderTab" class="easyui-tabs"><div title="基本信息" style="padding: 10px;"><table class="table01"><tbody><tr><th></th><td><a id="EditBuilderSaveBtn"href="javascript:void(0);"class="easyui-linkbutton save_btn play_none">保存</a> <aid="ViewBuilderEditBtn" href="javascript:void(0);"class="easyui-linkbutton edit_btn">编辑</a></td></tr><tr><th>项目名称</th><td><input name="buildProjName" class="entry10 easyui-textbox" type="text"data-options="required: true"></td></tr><tr><th>所处施工阶段</th><td><input name="buildConsStage" class="entry10 easyui-textbox" type="text"></td></tr><tr><th>所属分公司</th><td><input id="dwid1" name="branchOffice" class="entry10 easyui-textbox"type="text" data-options="required: true"></td></tr><tr><th>总包单位</th><td><input name="totalUnit" class="entry02 easyui-textbox" type="text"><spanclass="pdL10"><a href="javascript:void(0);">下载</a></span></td></tr><tr><th>分包商</th><td><input name="branchUnit" class="entry02 easyui-textbox" type="text"><spanclass="pdL10"><a href="javascript:void(0);">下载</a></span></td></tr><tr><th>监理单位</th><td><input name="supervisorUnit" class="entry02 easyui-textbox" type="text"><spanclass="pdL10"><a href="javascript:void(0);">下载</a></span></td></tr><tr><th>施工方<br> 安全负责人</th><td><input name="consStaff" class="entry02 easyui-textbox" type="text"><span class="pdL10 pdR5">联系电话</span> <input name="consStaffTel"class="entry02 easyui-textbox" type="text"></td></tr></tbody></table></div><div title="危险源分析" style="padding: 10px;"><div id="EditToolsHazard" class="clearfix bg_grey_linear"><a id="OpenEditAddHazard" href="javascript:void(0);"class="tools_btn bg_ease colL"><span class="btn_add">新增</span></a><a id="DelEditHazard" href="javascript:void(0);"class="tools_btn bg_ease colL"><span class="btn_del">删除</span></a></div><table id="LedgerDg01" class="easyui-datagrid"><thead><tr><th data-options="field:'productid'" width="220">时间</th><th data-options="field:'devPlanTypeName'" width="100">类型</th><th data-options="field:'devPlanname'" width="150">内容</th><th data-options="field:'devPtexeName'" width="220">巡检人</th></tr></thead></table></div></div></form></div><!-- *******************************************************************************页面代码分割线*******************************************************************************************--><div id="ViewDialog" class="easyui-dialog dialog_twoCol"><form id="addSfyBuildForm" method="post" action="addConstruManageInfo"><div id="DialogTab" class="easyui-tabs"><div title="基本信息" style="padding: 5px;"><table class="table02"><tbody><tr><th>项目名称</th><td colspan="3"><input name="buildProjName"class="entry10 easyui-textbox" type="text"data-options="required: true"></td></tr><tr><th>所处施工阶段</th><td colspan="3"><input name="buildConsStage"class="entry10 easyui-textbox" type="text"></td></tr><tr><th>所属分公司</th><td colspan="3"><input id="dwid" name="branchOffice"class="entry10 easyui-textbox" type="text"data-options="required: true"></td></tr><tr><th>总包单位</th><td colspan="3"><input name="totalUnit"class="entry02 easyui-textbox" type="text"><spanclass="pdL10"><input type="text"class="entry02 easyui-filebox"></span></td></tr><tr><th>分包商</th><td colspan="3"><input name="branchUnit"class="entry02 easyui-textbox" type="text"><spanclass="pdL10"><input type="text"class="entry02 easyui-filebox"></span></td></tr><tr class="cloneRow play_none"><th>分包商</th><td colspan="3"><inputclass="entry02 easyui-textbox" type="text"><spanclass="pdL10"><input type="text"class="entry02 easyui-filebox"></span> <aclass="delRow" href="javascript:void(0);">删除</a></td></tr><tr><th></th><td colspan="3"><a id="AddSubcontractor"href="javascript:void(0);"class="easyui-linkbutton com_btn">添加分包商</a></td></tr><tr><th>监理单位</th><td colspan="3"><input name="supervisorUnit"class="entry02 easyui-textbox" type="text"><spanclass="pdL10"><input type="text"class="entry02 easyui-filebox"></span></td></tr><tr><th>施工方<br> 安全负责人</th><td><input name="consStaff"class="entry02 easyui-textbox" type="text"></td><th>联系电话</th><td><input name="consStaffTel"class="entry16 easyui-textbox" type="text"></td></tr></tbody></table></div><div title="危险源分析" style="padding: 15px 10px;"><div id="ToolsHazard" class="clearfix bg_grey_linear"><a id="OpenAddHazard" href="javascript:void(0);"class="tools_btn bg_ease colL"><span class="btn_add">新增</span></a><a id="DelHazard" href="javascript:void(0);"class="tools_btn bg_ease colL"><span class="btn_del">删除</span></a></div><table id="HazardDG" class="easyui-datagrid"></table></div></div><div class="common_btn dialog-button"><a id="SaveBuilder" href="javascript:void(0);"class="easyui-linkbutton save_btn">保存</a><!-- <a id="EditBuilder" href="javascript:void(0);" class="easyui-linkbutton edit_btn play_none">编辑</a> --><a onClick="$('#ViewDialog').dialog('close');"href="javascript:void(0);"class="easyui-linkbutton close_btn">关闭</a></div></form></div><div id="AddHazardDialog" class="easyui-dialog dialog_oneCol"><div class="boxStyle02"><form id="AddHazardForm"><table class="table01"><tbody><tr><th>时间段</th><td><input class="entry01 easyui-textbox" type="text"></td></tr><tr><th>标题</th><td><input class="entry01 easyui-textbox" type="text"data-options="height: 60, multiline: true"></td></tr><tr><th>措施</th><td><input class="entry01 easyui-textbox" type="text"data-options="height: 60, multiline: true"></td></tr></tbody></table></form></div><div class="common_btn dialog-button"><a id="SaveAddHazard" href="javascript:void(0);"class="easyui-linkbutton save_btn">保存</a> <aonClick="$('#AddHazardDialog').dialog('close');"href="javascript:void(0);"class="easyui-linkbutton close_btn">取消</a></div></div><div id="EditAddHazardDialog"class="easyui-dialog dialog_oneCol"><div class="boxStyle02"><form id="AddEditHazardForm"><table class="table01"><tbody><tr><th>时间段</th><td><input class="entry01 easyui-textbox" type="text"></td></tr><tr><th>标题</th><td><input class="entry01 easyui-textbox" type="text"data-options="height: 60, multiline: true"></td></tr><tr><th>措施</th><td><input class="entry01 easyui-textbox" type="text"data-options="height: 60, multiline: true"></td></tr></tbody></table></form></div><div class="common_btn dialog-button"><a id="SaveEditAddHazard" href="javascript:void(0);"class="easyui-linkbutton save_btn">保存</a> <aonClick="$('#EditAddHazardDialog').dialog('close');"href="javascript:void(0);"class="easyui-linkbutton close_btn">取消</a></div></div></div><!--Content end--></div></div></div></div></div></div></body></html>js页面：
/* -------------------------------------------------------------------* 通用函数* init ------------------------------------------------------------------- */ $(function(){jq.tree({el : '#orgTree',url : '/safetyorg/tree',onClick : function(node) {loadNode(node.id);},onLoadSuccess : function() {var node = $('#orgTree').tree('getRoot');$('#orgTree').tree('select', node.target);loadNode(node.id);}});$("#ViewDialog").dialog({closed: true,modal: true,shadow: false}); $("#AddHazardDialog").dialog({closed: true,modal: true,shadow: false,title: '添加危险源分析'});$("#EditAddHazardDialog").dialog({closed: true,modal: true,shadow: false,title: '添加危险源分析'});jq.searchbox({el : '#q_txt',fn : query});$('#dwid').combotree({url: base + "/safetyorg/tree",method:"GET"});$('#dwid1').combotree({url: base + "/safetyorg/tree",method:"GET"})var pp = {el : "#BuilderDg",onClickRow: viewBuilder,onLoadSuccess: function(data){//console.log(data.rows.length);if(data.rows.length > 0){$(this).datagrid('selectRow',0);}},columns : [ [{field : 'checkboxSel',checkbox : true},{field : 'buildProjName',width : 220,align : 'center',title : '项目名称'},{field : 'buildConsStage',width : 100,align : 'center',title : '所处施工阶段'},{field : 'totalUnit',width : 150,align : 'center',title : '总包单位'},{field : 'branchUnit',width : 220,align : 'center',title : '分包单位'}, {field : 'supervisorUnit',width : 100,align : 'center',title : '监理单位'}, {field : 'consStaff',width : 150,align : 'center',title : '施工方安全负责人'} ] ]};jq.dataGrid(pp);$("#HazardDG").datagrid({height: 250,fitColumns: true,method: 'get',//url: '../devequipment/list',pagination : true,onLoadSuccess:function(data){if(data!= null && data.length > 0 ){ $("#BuilderDg").datagrid("selectRow",0);}},columns: [[{field:'ck',checkbox:true},{field:'devNo',title:'时间段',width:220},{field:'devName',title:'标题',width:100},{field:'devTypeName',title:'措施',width:150}]],toolbar: '#ToolsHazard'});$("#DialogTab").tabs({height: 300});$("#BuilderTab").tabs({//height: 350,fit: true,narrow: true,plain: true,headerCls: 'nobd',tabHeight: 40,onSelect:function(title,index){reloadTabs(index+1);}});$("#LedgerDg01").datagrid({//height: 235,fit: true,fitColumns: true,method: 'get',pagination : true,url: '../devplanrecord/list',queryParams: {devId:null},onBeforeLoad:function(param){if(param.devId == null){return false;}},toolbar: '#EditToolsHazard'});//新增一个施工方$("#AddNew").bind("click", function(){addBuilder();});//删除一个施工方$("#DelRecords").bind("click", function(){//var rowData = $("#BuilderDg").datagrid("getChecked");//console.info(rowData);//var rowData1 = $("#BuilderDg").datagrid("getSelected");//console.info("选中"+rowData1);delBuilder();});//$("#SaveBuilder").bind("click", function(){saveBuilder();});//新增施工方时，新增，删除，保存危险源分析$("#OpenAddHazard").bind("click", function(){$("#AddHazardDialog").dialog('open');$("#AddHazardForm").form('clear');});$("#DelHazard").bind("click", function(){delHazard($("#HazardDG"));});$("#SaveAddHazard").bind("click", function(){saveHazard( $("#AddHazardForm"), $("#AddHazardDialog"), $("#HazardDG") );});//查看施工方信息，点击编辑按钮操作$("#ViewBuilderEditBtn").bind("click", function(){editBuilder();});//查看进入编辑状态之后，新增，删除，保存危险源分析$("#OpenEditAddHazard").bind("click", function(){$("#EditAddHazardDialog").dialog('open');$("#AddEditHazardForm").form('clear');});$("#DelEditHazard").bind("click", function(){delHazard($("#LedgerDg01"));});$("#SaveEditAddHazard").bind("click", function(){saveHazard( $("#AddEditHazardForm"), $("#EditAddHazardDialog"), $("#LedgerDg01") );});//新增施工方时，添加分包商$("#AddSubcontractor").bind("click", function(){var _node = $("tr.cloneRow").clone(true).removeClass("play_none").removeClass("cloneRow").addClass("addRow");$(this).parent("td").parent("tr").before(_node);$(".delRow").bind("click", function(){$(this).parent("td").parent("tr.addRow").remove();});});$("#BuilderTab .easyui-textbox").textbox('disable');$("#BuilderTab .easyui-combobox").combobox('disable');});//新增施工方function addBuilder(){$("#ViewDialog").dialog("open").dialog('setTitle','新增');$("#addSfyBuildForm").form('clear');$("#ViewDialog .easyui-textbox").textbox('enable');$("#ViewDialog .easyui-combobox").combobox('enable');/*$("#ViewDialog").siblings(".dialog-button").find(".save_btn").removeClass("play_none");$("#ViewDialog").siblings(".dialog-button").find(".edit_btn").addClass("play_none");*/}//编辑一个施工方function editBuilder(){$("#EditBuilderSaveBtn").removeClass("play_none");$("#ViewBuilderEditBtn").addClass("play_none");$("#BuilderTab .easyui-textbox").textbox('enable');$("#BuilderTab .easyui-combobox").combobox('enable');}//保存一个施工方function saveBuilder(){/*var devId = $("#devId").val();var saveOrgUrl = "../devequipment/save";if(devId !=""){saveOrgUrl = "../devequipment/edit";}*/$('#addSfyBuildForm').form('submit', {//url : saveOrgUrl,onSubmit : function() {var isValid = $(this).form('validate');if (!isValid) {}return isValid; // return false will stop the form submission},success : function(datas) {// 返回的是组织idvar data = eval("("+datas+")");if (data.success) {$('#ViewDialog').dialog('close');$.messager.show({title : '保存成功',msg : '保存设备成功.',timeout : 3000,showType : 'slide'});$("#BuilderDg").datagrid('reload');} else {var msg = "保存设备失败.";msg = data.message;$.messager.show({title : '保存失败',msg : msg,timeout : 3000,showType : 'slide'});}}});}//删除施工方function delBuilder(){var rec = $("#BuilderDg").datagrid('getChecked'); //获取选定的行【这是一个数组】if(rec.length > 0){/*$.each(rec, function(i){var row = $("#BuilderDg").datagrid('getRowIndex',rec[i]); //获取行索引$("#BuilderDg").datagrid('deleteRow',row); //这是前台删除，需要提交到后台});*/$.messager.confirm('信息', '确定要删除吗？', function(confirmFlg) {//fn(b): 当用户点击“确定”按钮的时侯将传递一个true值给回调函数，否则传递一个false值。 if (confirmFlg) {var GroupIds = new Array();for (var i = 0; i < rec.length; i++) {var row = rec[i];GroupIds.push(row.buildId);}$.ajax({type : "get",dataType : 'JSON',url : "../construManage/delete/"+ GroupIds.join(','),success : function(result) {if (result.success) {$("#BuilderDg").datagrid("reload");$.messager.alert('提示', '删除成功！','info');}else{$.messager.alert('提示', '删除失败！','info');}}});} });} else {$.messager.alert('提示','请选择你要删除的记录！','warning');};}//保存一个危险源分析function saveHazard(ele_01, ele_02, ele_03){ //ele_01 form, ele_02 diaolog, ele_03 datagrid/*$('#AddHazardForm')*/ele_01.form('submit', {url : '',onSubmit : function() {var isValid = $(this).form('validate');if (!isValid) {}return isValid; // return false will stop the form submission},success : function(datas) {// 返回的是组织idvar data = eval("("+datas+")");if (data.success) {/*$('#AddHazardDialog')*/ele_02.dialog('close');$.messager.show({title : '保存成功',msg : '保存设备成功.',timeout : 3000,showType : 'slide'});/*$("#HazardDG")*/ele_03.datagrid('reload');} else {var msg = "保存设备失败.";msg = data.message;$.messager.show({title : '保存失败',msg : msg,timeout : 3000,showType : 'slide'});}}});}//删除危险源分析function delHazard(ele_01){var rec = /*$("#HazardDG")*/ele_01.datagrid('getSelections'); //获取选定的行【这是一个数组】if(rec.length > 0){/*$.each(rec, function(i){var row = $("#BuilderDg").datagrid('getRowIndex',rec[i]); //获取行索引$("#BuilderDg").datagrid('deleteRow',row); //这是前台删除，需要提交到后台});*/$.messager.confirm('信息', '确定要删除吗？', function(confirmFlg) { if (confirmFlg) {var GroupIds = new Array();for (var i = 0; i < rec.length; i++) {var row = rec[i];GroupIds.push(row.devId)}$.ajax({type : "get",dataType : 'JSON',url : '',success : function(result) {if (result.success) {/*$("#HazardDG")*/ele_01.datagrid("reload");$.messager.alert('提示', '删除成功！','info');}else{$.messager.alert('提示', '删除失败！','info');}}});} });} else {$.messager.alert('提示','请选择你要删除的记录！','warning');};}// 加载function loadNode(_orgId) {$('#q_txt').searchbox('setValue', '');jq.queryGrid({el : "#BuilderDg",url : '/construManage/list',queryParams : {orgId : _orgId}});$('#orgTreeDg').combotree('setValue', _orgId);}//查询function query(value, name) {var node = $('#orgTree').tree('getSelected');if (node == null) {jq.warning('未选择组织树节点');return false;}$('#orgTreeDg').combotree('setValue', node.id);jq.queryGrid({el : "#BuilderDg",method : 'post',url : '/construManage/list',queryParams : {title : value,orgId : node.id}});}//查看施工方function viewBuilder(rowIndex, rowData){/*$("#BuilderTab").tabs('select', 0);$("#SfyBuildForm").form('clear');$("#BuilderTab .easyui-textbox").textbox('disable');$("#BuilderTab .easyui-combobox").combobox('disable');*/$("#SfyBuildForm").form("clear");$("#SfyBuildForm").form("load",rowData);} 0 0
- easyUI 中datagrid控件demo，包括选中一行能读取到数据
- EasyUI datagrid默认选中第一行
- EasyUI datagrid获取一行数据
- easyui datagrid中插入一行数据注意一点
- easyui datagrid中插入一行数据注意一点
- easyui-datagrid未查询到数据时控件扩展
- miniui中dataGrid默认选中第一行
- easyui从datagrid中添加数据到datalist中
- easyui datagrid 数据加载到另一datagrid
- easyUI datagrid中combobox默认选中问题
- 【easyUI】datagrid 通过formatter读取嵌套数据
- EasyUI单击选中一行数据并获取数据
- 读取EasyUI datagrid中rowData的方式
- silverlight中如何选中datagrid中一行并处理该行
- .net+EasyUI+datagrid DEMO
- easyui datagrid 获取多条选中的数据进行操作
- EasyUI中datagrid控件的Editor
- Jquery-easyui中的datagrid插件读取数据库中得数据并显示
- bzoj3560 DZY Loves Math V 数论
- 导航条 点击后 添加背景颜色
- group by 可以去掉重复数据
- jsonp的简单学习
- 数据库事务
- easyUI 中datagrid控件demo，包括选中一行能读取到数据
- Golang(Go语言)内置函数之append
- 缓存误区（下）
- Maven项目中log4j配置
- 酷炫的android dialog弹出框
- 对MySQL的几个错误印象
- Git 操作整理
- 能帮你管理Xcode插件的工具 Alcatraz
- java之StringUtils
