ホームページ > 記事 > ウェブフロントエンド > Jquery EasyUIはツリーグリッドにチェックボックスを表示し、選択された値を取得するメソッドを実装します_jquery
Jquery EasyUIはツリーグリッドにチェックボックスを表示し、選択された値を取得するメソッドを実装します_jquery
- PHP中文网オリジナル
- 2016-05-16 15:02:552494ブラウズ
Jquery EasyUI は、ツリーグリッドにチェックボックスを表示し、選択された value_jquery を取得するメソッドを実装します
最初に最終レンダリングを配置します:
次にコード:
html ファイル:
<body> <h1>TreeGrid</h1> <div> <a id="consle" href="#">consle</a> </div> <table id="test" title="Folder Browser" style="width:400px;height:300px" > </table> </body>
説明: コンテンツ、タイトル、そしてテーブルはありません。テストのためにボタンコンソールを置きました。必要はありません。削除するだけです。もちろん、いくつかの js ファイルと css ファイルを引用する必要があります:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="description" content="easyui help you build your web page easily!"> <title>jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="ws.js"></script>
次に、js ファイル:
$(function(){
$('#test').treegrid({
url:"data/treegrid_data.json",
idField:'id',
treeField:'name',
animate:"true",
rownumbers:"true",
columns:[[
{title:'Task Name',field:'name',formatter:function(value,rowData,rowIndex){
return " " + rowData.name;
},width:180},
{field:'size',title:'Persons',width:60,align:'right'},
{field:'date',title:'Begin Date',width:80}
]]
});
$("#consle").bind("click",consleclick)
});
function set_power_status(){
var idList = "";
$("input:checked").each(function(){
var id = $(this).attr("id");
if(id.indexOf("ceshi_")>-1)
idList += id.replace("ceshi_",'')+',';
})
alert(idList);
}
function consleclick(){
var node = $('#test').treegrid('expandAll',2);
}説明: easyUI のツリーグリッドは、次の目的で呼び出されます。チェックボックスを表示し、最初の列のフォーマッタを作成し、選択したチェックボックスを取得するイベントをバインドして効果を表示します。必要がない場合は削除することも、アラートを削除して他のイベント処理関数に変更することもできます。 。
最後に、データ json ファイルを添付します:
[{
"id":1,
"name":"C",
"size":"",
"date":"02/19/2010",
"children":[{
"id":2,
"name":"Program Files",
"size":"120 MB",
"date":"03/20/2010",
"children":[{
"id":21,
"name":"Java",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":211,
"name":"java.exe",
"size":"142 KB",
"date":"01/13/2010"
},{
"id":212,
"name":"jawt.dll",
"size":"5 KB",
"date":"01/13/2010"
}]
},{
"id":22,
"name":"MySQL",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":221,
"name":"my.ini",
"size":"10 KB",
"date":"02/26/2009"
},{
"id":222,
"name":"my-huge.ini",
"size":"5 KB",
"date":"02/26/2009"
},{
"id":223,
"name":"my-large.ini",
"size":"5 KB",
"date":"02/26/2009"
}]
}]
},{
"id":3,
"name":"eclipse",
"size":"",
"date":"01/20/2010",
"children":[{
"id":31,
"name":"eclipse.exe",
"size":"56 KB",
"date":"05/19/2009"
},{
"id":32,
"name":"eclipse.ini",
"size":"1 KB",
"date":"04/20/2010"
},{
"id":33,
"name":"notice.html",
"size":"7 KB",
"date":"03/17/2005"
}]
}]
}]注:
この json は公式 Web サイトから直接ダウンロードされ、どこでも見ることができます。 URLに変更しました。
上記は、treegrid_jquery でチェックボックスを表示し、選択された値を取得する Jquery EasyUI のメソッドの内容です。さらに関連した内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。