easyUI 中datagrid控件demo，包括选中一行能读取到数据
2016-02-23 14:27
656 查看
当上方点击时，下方显示所有详细信息，要利用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">
<div
data-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">
<div
data-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> <a
id="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"><span
class="pdL10"><a href="javascript:void(0);">下载</a></span></td>
</tr>
<tr>
<th>分包商</th>
<td><input name="branchUnit" class="entry02 easyui-textbox" type="text"><span
class="pdL10"><a href="javascript:void(0);">下载</a></span></td>
</tr>
<tr>
<th>监理单位</th>
<td><input name="supervisorUnit" class="entry02 easyui-textbox" type="text"><span
class="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"><span
class="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"><span
class="pdL10"><input type="text"
class="entry02 easyui-filebox"></span></td>
</tr>
<tr class="cloneRow play_none">
<th>分包商</th>
<td colspan="3"><input
class="entry02 easyui-textbox" type="text"><span
class="pdL10"><input type="text"
class="entry02 easyui-filebox"></span> <a
class="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"><span
class="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> <a
onClick="$('#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> <a
onClick="$('#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) {// 返回的是组织id
var 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) {// 返回的是组织id
var 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);
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- UIView和CALayer的区别 说的比较清楚了
- iOS-UItableview 分割线(自定义+原生)方法总结
- UI整理-----part7--模态视图 push&pop
- UI整理-----part6--页面间的传值
- Web UI 自动化测试环境搭建 (转载自51测试天地第三十九期上)
- 在keil mdk中的error: #28: expression must have a constant value
- 在非UI线程处理Bitmap
- 最简单的java GUI
- iOS开发第三方存储库YTKKeyValueStore
- 反编译jd_gui 去掉行号
- 安卓通知栏自定义布局提示(NotificationCompat.Builder)
- Easyui Datagrid 如何实现后台交互显示用户数据列表
- NSNumber和NSValue
- EasyUI datagrid 在ie8和360兼容模式兼容性问题
- 系统数据文件和信息 《APUE》 Chapter-6
- Qt使用教程之使用Qt Quick UI表单（三）
- 标准IO库 知识点百问《APUE》 chapter-5
- 标准IO库《APUE》 Chapter-5
- POJ 2442 Sequence 堆的思想的应用 STL 堆学习
- UINavigationBar