Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.12.2011, 14:59
Новичок на форуме
Отправить личное сообщение для gaz2003 Посмотреть профиль Найти все сообщения от gaz2003
 
Регистрация: 06.11.2011
Сообщений: 3

jqgrid tree and checkbox
Добрый день.
Накидал пример по работе jqgrid в виде дерева.
1.Вопрос как добавить обработку checkbox.
а.При смене статуса checkbox получить строку где данный checkbox находится.
б. При смене статуса checkbox корневого узла сменить на данный статус checkbox дочерних элементов.
2. Как при клике (не выделении) на строку получить данную строку

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Пример</title>

<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css" />

<style>
html, body {
margin: 0;
padding: 0;
font-size: 80%;
}
</style>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.2/js/jquery.jqGrid.min.js"></script>

<script type="text/javascript">
$(function(){
var objCard = {};
objCard['id'] = 1; 
objCard['name'] = "sampl"; 
var mydata = [
    { id:"1", menu:"Loading Data",   url:"", img:"", obj:objCard,
	 level:"0", parent:"",  isLeaf:false, expanded:false, loaded:true },
    { id:"2", menu:"XML Data",   url:"true", img:"10", obj:objCard,
	 level:"1", parent:"1",  isLeaf:true, expanded:true, loaded:true },
    { id:"3", menu:"JSON Data",  url:"jsonex.html", img:"0", obj:objCard,   
	 level:"1", parent:"1",  isLeaf:true, expanded:false, loaded:true }
];

  $('#table').jqGrid({

onSelectRow: function(rowid){ 
	var data= $("#table").jqGrid('getRowData',rowid);
   },
	    datatype: "jsonstring",
	    datastr: mydata,
            height: "auto",
            pager: false,
            loadui: "disable",
            colNames: ["id","Items","url","", "obj"],
            colModel: [
                {name: "id",width:1,hidden:true, key:true},
                {name: "menu", width:150, resizable: false, sortable:false},
                {name: "url",width:50, formatter:'checkbox', formatoptions:{disabled: false}},
                {name: "img",width:30, formatter: unitsInStockFormatter},
                {name: "obj",width:1, hidden:true}
            ],
            treeGrid: true,
            caption: "jqGrid Demos",

treeGridModel: 'adjacency',
treedatatype: "local",
            ExpandColumn: "menu",
            width: 200,
            rowNum: 200,
            ExpandColClick: true,
	    jsonReader: {
	    repeatitems: false,
	    root: function (obj) { return obj; },
	}
 });

    });

function  unitsInStockFormatter(cellvalue, options, rowObject) {
    var cellValueInt = parseInt(cellvalue);
    if (cellValueInt > 10)
      return "<center><img src='ui-tab-gray.png' alt='" + cellvalue + "'title='" + cellvalue + "' /></center>";
    else if (cellValueInt > 0)
      return "<center><img src='ui-tab-side-gray.png' alt='" + cellvalue + "'title='" + cellvalue + "' /></center>";
    else
      return "<center><img src='ui-text-area-gray.png' alt='" + cellvalue + "'title='" + cellvalue + "' /></center>";
  }; 

</script>

</head>
<body>
    <table id="table"></table>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск