您的位置：首页 > 产品设计 > UI/UE

EasyUI中combogrid的代码实例

2013-06-02 22:46 218 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>combogrid</title>

<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="themes/icon.css">

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="jquery.easyui.min.js"></script>

<script>

$(function(){

$("#cc").combogrid({

panelWidth:400,

value:'safds',//缺省值

idField:"code",

textField:"name",

url:"datagrid_data.json",

columns:[[

{field:'code',title:'Code',width:60},

{field:'name',title:'Name',width:100},

{field:'addr',title:'Address',width:120},

{field:'col4',title:'Col41',width:100}

]]

});

});

//重新加载数据源

function reload(){

$('#cc').combogrid('grid').datagrid('reload');

}

//设置select中的值

function setValue(){

$("#cc").combogrid("setValue","003");

}

//获取下拉列表中选择的值

function getValue(){

var val = $('#cc').combogrid('getValue');

alert(val);

}

//禁用组件

function disable(){

$('#cc').combogrid('disable');

}

//启用组件

function enable(){

$('#cc').combogrid('enable');

}

//获取选中的表格的数据

function getGridValue(){

var grid=$("#cc").combogrid("grid");//获取表格对象

var row = grid.datagrid('getSelected');//获取行数据

alert("选择的grid中的数据如下：code:"+row.code+" name:"+row.name+" addr:"+row.addr+" col4:"+row.col4);

}

function clear(){

$("#cc").combogrid("clear");

}

</script>

</head>

<body>

<h3>combogrid</h3>

<div style="margin:10px 0;">

<a href="#" class="easyui-linkbutton" onclick="reload()">Reload</a>

<a href="#" class="easyui-linkbutton" onclick="setValue()">SetValue</a>

<a href="#" class="easyui-linkbutton" onclick="getValue()">GetValue</a>

<a href="#" class="easyui-linkbutton" onclick="getGridValue()">GetGridValue</a>

<a href="#" class="easyui-linkbutton" onclick="disable()">Disable</a>

<a href="#" class="easyui-linkbutton" onclick="enable()">Enable</a>

<a href="#" class="easyui-linkbutton" onclick="clear()">clear</a>

</div>

<select id="cc" class="easyui-combogrid" style="width:250px;"></select>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航