Arrastar e Soltar Personalizado

									
										$render=explode(" ",$_POST["partial_render"]);
	
										if(isset($_POST["colIndex"])){ unset($_SESSION["col"][$_POST["colIndex"]]);}

										if ($_POST["property"]=="CÓDIGO"){
											$coluna="codigo";
										}
										if ($_POST["property"]=="NOME"){
											$coluna="produto";
										}
										if ($_POST["property"]=="DESCRIÇÃO"){
											$coluna="descricao";
										}
										if ($_POST["property"]=="PREÇO"){
											$coluna="preco";
										}
										if ($_POST["property"]=="CATEGORIA"){
											$coluna="categoria";
										}
										if ($_POST["property"]=="QUANTIDADE"){
											$coluna="quantidade";
										}
										
										$droppedColumnId=$_POST["droppedColumnId"]+$_POST["dropPos"];
										
										array_splice( $_SESSION["col"], $droppedColumnId, 0, $coluna );
										
										$resposta="<div id="tree" class="ui-tree ui-widget ui-widget-content ui-corner-all" role="tree" tabindex="0" aria-multiselectable="false" style="margin-bottom:20px">
											<ul class="ui-tree-container">
												<li id="tree:0" data-rowkey="0" data-nodetype="default" class="ui-treenode ui-treenode-parent ui-treenode-unselected">
													<div class="ui-treenode-content" role="treeitem" aria-expanded="true" aria-selected="false"><span class="ui-tree-toggler ui-icon ui-icon-triangle-1-s"></span><span></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">Columns</span></div>
													<ul class="ui-treenode-children" role="group">";
														if(in_array("codigo",$_SESSION["col"])) {}else{ 
															$resposta.="
																<li id="tree:0_0" data-rowkey="0_0" data-nodetype="column" class="ui-treenode ui-treenode-leaf ui-treenode-unselected">
																	<div class="ui-treenode-content" role="treeitem" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon pi pi-ellipsis-v"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">CÓDIGO</span></div>
																	<ul class="ui-treenode-children" role="group" style="display:none"></ul>
																</li>
															";
														}
														if(in_array("produto",$_SESSION["col"])) {}else{
															$resposta.="
																<li id="tree:0_1" data-rowkey="0_1" data-nodetype="column" class="ui-treenode ui-treenode-leaf ui-treenode-unselected">
																	<div class="ui-treenode-content" role="treeitem" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon pi pi-ellipsis-v"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">NOME</span></div>
																	<ul class="ui-treenode-children" role="group" style="display:none"></ul>
																</li>
															";
														}
														if(in_array("descricao",$_SESSION["col"])) {}else{
															$resposta.="
																<li id="tree:0_2" data-rowkey="0_2" data-nodetype="column" class="ui-treenode ui-treenode-leaf ui-treenode-unselected">
																	<div class="ui-treenode-content" role="treeitem" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon pi pi-ellipsis-v"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">DESCRIÇÃO</span></div>
																	<ul class="ui-treenode-children" role="group" style="display:none"></ul>
																</li>
															";
														}
														if(in_array("preco",$_SESSION["col"])) {}else{
															$resposta.="
																<li id="tree:0_3" data-rowkey="0_3" data-nodetype="column" class="ui-treenode ui-treenode-leaf ui-treenode-unselected">
																	<div class="ui-treenode-content" role="treeitem" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon pi pi-ellipsis-v"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">PREÇO</span></div>
																	<ul class="ui-treenode-children" role="group" style="display:none"></ul>
																</li>
															";
														}
														if(in_array("categoria",$_SESSION["col"])) {}else{
															$resposta.="
																<li id="tree:0_4" data-rowkey="0_4" data-nodetype="column" class="ui-treenode ui-treenode-leaf ui-treenode-unselected">
																	<div class="ui-treenode-content" role="treeitem" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon pi pi-ellipsis-v"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">CATEGORIA</span></div>
																	<ul class="ui-treenode-children" role="group" style="display:none"></ul>
																</li>
															";
														}
														if(in_array("quantidade",$_SESSION["col"])) {}else{
															$resposta.="
																<li id="tree:0_5" data-rowkey="0_5" data-nodetype="column" class="ui-treenode ui-treenode-leaf ui-treenode-unselected">
																	<div class="ui-treenode-content" role="treeitem" aria-expanded="false" aria-selected="false"><span class="ui-treenode-leaf-icon"></span><span class="ui-treenode-icon ui-icon pi pi-ellipsis-v"></span><span class="ui-treenode-label ui-corner-all" tabindex="-1" role="treeitem">QUANTIDADE</span></div>
																	<ul class="ui-treenode-children" role="group" style="display:none"></ul>
																</li>
															";
															}
														$resposta.="
													</ul>
												</li>
											</ul><input id="tree_scrollState" name="tree_scrollState" type="hidden" autocomplete="off" aria-hidden="true" value="0,0" />
										</div>
										<script id="tree_s" type="text/javascript">
											DinarteCoelho.cw("VerticalTree", "widget_form_tree", { id: "tree", dynamic: false, cache: false, iconStates: {} });
										</script>";
										
										$resposta1="
											<div id="products" class="ui-datatable ui-widget">
												<div class="ui-datatable-tablewrapper">
													<table role="grid">
														<thead id="products_head">
															<tr role="row">";
															foreach ($_SESSION["col"] as &$valor) {
																if ($valor=="codigo") { $resposta1.="<th id="".array_search("codigo",$_SESSION["col"])."" class="ui-state-default" role="columnheader" aria-label="CÓDIGO" scope="col"><span class="ui-column-title"><span class="droppoint dropleft" style="float:left;display:block;height:20px;width:10px;border:0 none;"></span><span class="droppoint dropright" style="float:right;display:block;height:20px;width:10px;border:0 none;"></span>CÓDIGO</span></th>";}
																if ($valor=="produto") { $resposta1.="<th id="".array_search("produto",$_SESSION["col"])."" class="ui-state-default" role="columnheader" aria-label="NOME" scope="col"><span class="ui-column-title"><span class="droppoint dropleft" style="float:left;display:block;height:20px;width:10px;border:0 none;"></span><span class="droppoint dropright" style="float:right;display:block;height:20px;width:10px;border:0 none;"></span>NOME</span></th>";}
																if ($valor=="descricao") { $resposta1.="<th id="".array_search("descricao",$_SESSION["col"])."" class="ui-state-default" role="columnheader" aria-label="DESCRIÇÃO" scope="col"><span class="ui-column-title"><span class="droppoint dropleft" style="float:left;display:block;height:20px;width:10px;border:0 none;"></span><span class="droppoint dropright" style="float:right;display:block;height:20px;width:10px;border:0 none;"></span>DESCRIÇÃO</span></th>";}
																if ($valor=="preco") { $resposta1.="<th id="".array_search("preco",$_SESSION["col"])."" class="ui-state-default" role="columnheader" aria-label="PREÇO" scope="col"><span class="ui-column-title"><span class="droppoint dropleft" style="float:left;display:block;height:20px;width:10px;border:0 none;"></span><span class="droppoint dropright" style="float:right;display:block;height:20px;width:10px;border:0 none;"></span>PREÇO</span></th>";}
																if ($valor=="categoria") { $resposta1.="<th id="".array_search("categoria",$_SESSION["col"])."" class="ui-state-default" role="columnheader" aria-label="CATEGORIA" scope="col"><span class="ui-column-title"><span class="droppoint dropleft" style="float:left;display:block;height:20px;width:10px;border:0 none;"></span><span class="droppoint dropright" style="float:right;display:block;height:20px;width:10px;border:0 none;"></span>CATEGORIA</span></th>";}						
																if ($valor=="quantidade") { $resposta1.="<th id="".array_search("quantidade",$_SESSION["col"])."" class="ui-state-default" role="columnheader" aria-label="QUANTIDADE" scope="col"><span class="ui-column-title"><span class="droppoint dropleft" style="float:left;display:block;height:20px;width:10px;border:0 none;"></span><span class="droppoint dropright" style="float:right;display:block;height:20px;width:10px;border:0 none;"></span>QUANTIDADE</span></th>";}
															}
															$resposta1.="
															</tr>
														</thead>
														<tbody id="products_data" class="ui-datatable-data ui-widget-content">";
																$result = "SELECT * FROM produtos p INNER JOIN categorias c ON p.categoria=c.id_categoria LIMIT 10";
																$result = $pdo->query($result);
																	while ($linha = $result->fetch(PDO::FETCH_ASSOC)){
																	$lin= !($linha["id_produto"] % 2) ? "odd" : "even";
															$resposta1.="
															<tr data-ri="".$linha["id_produto"]."" class="ui-widget-content ui-datatable-".$lin."" role="row">";
																foreach ($_SESSION["col"] as &$valor) {
																	if($valor=="preco"){
																		$resposta1.="<td role="gridcell" class="">R$ ".$linha[$valor].",00</td>";
																	}else{
																		$resposta1.="<td role="gridcell" class="">".$linha[$valor]."</td>";
																	}
																}
															$resposta1.="
															</tr>";
																}
															$resposta1.="
														</tbody>
													</table>
												</div>
											</div>
											<script id="products_s" type="text/javascript">
												DinarteCoelho.cw("DataTable", "widget_form_products", { id: "products", groupColumnIndexes: [], disableContextMenuIfEmpty: false });
											</script>
										";
									
								

									
										function initDND() {
											$(".ui-treenode-leaf")
												.draggable({
													helper: "clone"
													, scope: "treetotable"
													, zIndex: ++DinarteCoelho.zindex
												});
											
											$(".ui-datatable .droppoint")
												.droppable({
													activeClass: "active-drop"
													, hoverClass: "highlight-drop"
													, tolerance: "pointer"
													, scope: "treetotable"
													, drop: function (event, ui) {
														var property = ui.draggable.find(".ui-treenode-label")
															.text()
															, droppedColumnId = $(this)
															.parents("th:first")
															.attr("id")
															, dropPos = $(this)
															.hasClass("dropleft") ? 0 : 1;
														
														treeToTable([
															{ name: "property", value: property }
															, { name: "droppedColumnId", value: droppedColumnId }
															, { name: "dropPos", value: dropPos }
														]);
													}
												});
											
											$(".ui-datatable th")
												.draggable({
													scope: "tabletotree"
													, helper: function () {
														var th = $(this);
														
														return th.clone()
															.appendTo(document.body)
															.css("width", th.width());
													}
												});
											
											$(".ui-tree")
												.droppable({
													helper: "clone"
													, scope: "tabletotree"
													, activeClass: "active-drop"
													, hoverClass: "highlight-drop"
													, tolerance: "touch"
													, drop: function (event, ui) {
														tableToTree([
															{ name: "colIndex", value: ui.draggable.index() }
														]);
													}
												});
										}
										
										$(function () {
											initDND();
										});
										treeToTable = function () {
											return dc.ab({
												s: "arvoreTabela"
												, f: "formulario"
												, u: "tree products"
												, onco: function (xhr, status, args, data) {
													initDND();
												}
												, pa: arguments[0]
											});
										};
										tableToTree = function () {
											return dc.ab({
												s: "tabelaArvore"
												, f: "formulario"
												, u: "tree products"
												, onco: function (xhr, status, args, data) {
													initDND();
												}
												, pa: arguments[0]
											});
										};
										dc.cw("VerticalTree", "widget_tree", {
											id: "tree"
											, dynamic: false
											, cache: false
											, iconStates: {}
										});