Архив метки: javascript

Экспорт из jqGrid в Excel часть 2

Описанный вот здесь способ таки оказался неудобен. Однако я вспомнил что Excel отлично открывает файл в формате xml. И формат этот хорошо описан здесь. Так почему бы не формировать xml файл? Сказано — сделано. Код видоизменился в :

function exportExcel(list)
        {
            var mya=new Array();
            mya=$(list).getDataIDs(); 
            var data=$(list).getRowData(mya[0]);  
            var colNames=new Array(); 
            var ii=0;
            for (var i in data){colNames[ii++]=i;}
            var html="";            
            headxls="<?xml version='1.0'?><?mso-application progid='Excel.Sheet'?>"+"\n";
            sworkbook="<Workbook xmlns='urn:schemas-microsoft-com:office:spreadsheet' xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns:ss='urn:schemas-microsoft-com:office:spreadsheet' xmlns:html='http://www.w3.org/TR/REC-html40'>"+"\n";
            eworkbook="</Workbook>"+"\n";
            styles="<Styles>"+"\n"+
                    "<Style ss:ID='borderedbold'>"+"\n"+
                    "<Borders>"+"\n"+
                    "	  <Border ss:Position='Bottom' ss:LineStyle='Continuous' ss:Weight='1' /> "+"\n"+
                    "	  <Border ss:Position='Left' ss:LineStyle='Continuous' ss:Weight='1' /> "+"\n"+
                    "	  <Border ss:Position='Right' ss:LineStyle='Continuous' ss:Weight='1' /> "+"\n"+
                    "	  <Border ss:Position='Top' ss:LineStyle='Continuous' ss:Weight='1' /> "+"\n"+
                    "</Borders>"+"\n"+
                    "<Font ss:Bold='1' /> "+"\n"+
                    "</Style>"+"\n"+
                    "<Style ss:ID='bordered'>"+"\n"+
                    "<Borders>"+"\n"+
                    "	  <Border ss:Position='Bottom' ss:LineStyle='Continuous' ss:Weight='1' /> "+"\n"+
                    "	  <Border ss:Position='Left' ss:LineStyle='Continuous' ss:Weight='1' /> "+"\n"+
                    "	  <Border ss:Position='Right' ss:LineStyle='Continuous' ss:Weight='1' /> "+"\n"+
                    "	  <Border ss:Position='Top' ss:LineStyle='Continuous' ss:Weight='1' /> "+"\n"+
                    "</Borders>"+"\n"+                    
                    "</Style>"+"\n"+                    
                    "</Styles> "+"\n";
            sworksheet="<Worksheet ss:Name='WorksheetName'>"+"\n";
            eworksheet="</Worksheet>"+"\n";
            stable="<Table>"+"\n";
            etable="</Table>"+"\n";
            columnw=""+
                    "<Column ss:Index='1' ss:AutoFitWidth='0' ss:Width='60' /> "+"\n"+
                    "<Column ss:Index='2' ss:AutoFitWidth='0' ss:Width='200' /> "+"\n"+
                    "<Column ss:Index='3' ss:AutoFitWidth='0' ss:Width='200' /> "+"\n"+
                    "<Column ss:Index='4' ss:AutoFitWidth='0' ss:Width='130' /> "+"\n"+
                    "<Column ss:Index='5' ss:AutoFitWidth='0' ss:Width='130' /> "+"\n"+
                    "<Column ss:Index='6' ss:AutoFitWidth='0' ss:Width='120' /> "+"\n";
            headcolumn=""+
                    	"<Row>"+"\n"+
			"   <Cell ss:StyleID='borderedbold'><Data ss:Type='String'>Номер</Data></Cell>"+"\n"+
			"   <Cell ss:StyleID='borderedbold'><Data ss:Type='String'>Склад</Data></Cell>"+"\n"+
			"   <Cell ss:StyleID='borderedbold'><Data ss:Type='String'>Номенклатура</Data></Cell>"+"\n"+
			"   <Cell ss:StyleID='borderedbold'><Data ss:Type='String'>Серия</Data></Cell>"+"\n"+
			"   <Cell ss:StyleID='borderedbold'><Data ss:Type='String'>Дата окончания</Data></Cell>"+"\n"+
			"   <Cell ss:StyleID='borderedbold'><Data ss:Type='String'>Количество</Data></Cell>"+"\n"+
			"</Row> "+"\n";
            
            html=html+headxls+sworkbook+styles+sworksheet+stable+columnw+headcolumn;
            
            for(i=0;i<mya.length;i++)
                {
                data=$(list).getRowData(mya[i]); 
                html=html+"<Row>"+"\n";
                for(j=0;j<colNames.length;j++)
                    {
                    html=html+"<Cell ss:StyleID='bordered'><Data ss:Type='String'>"+data[colNames[j]]+"</Data></Cell>"+"\n";                        
                    }
                html=html+"</Row>"+"\n";
                }
            html=html+etable+eworksheet+eworkbook;
            
            document.forms[0].csvBuffer.value=html;
            document.forms[0].method='POST';
            document.forms[0].action='inc/csvExport.php'; 
            document.forms[0].target='_blank';
            document.forms[0].submit();
        };
function ViewReports(list,pager){
jQuery(list).jqGrid({
   	url:'controller/server/operreports/viewremainssert.php',
	datatype: "json",
   	colNames:['Id','Склад','Номенклатура','Серия','Дата окончания','Количество'],
   	colModel:[
   		{name:'id',index:'id', width:20},
                {name:'sklad',index:'sklad', width:155, width:155,summaryType:'count', summaryTpl : '({0}) Всего:'},
   		{name:'namenome',index:'namenome', width:100},
		{name:'seria',index:'seria', width:100},
   		{name:'dtend',index:'dtend', width:100},
                {name:'kol',index:'kol', width:100,sorttype:'number',formatter:'number', summaryType:'sum'}
   	],
        grouping: true,
   	groupingView : {
   		groupField : ['sklad'],
   		groupText : ['<b>{0}</b>'],
                groupCollapse : true,
		groupSummary : true,
   	},        
        
        viewrecords: true,
   	height: 'auto',        
	autowidth: true,	
        shrinkToFit: true, 
   	pager: pager,
   	sortname: 'sklad',
    viewrecords: true,
    rowNum:1000,
    scroll:1,
    sortorder: "asc",    
    caption:"Просоченные сертификаты"
}); 
jQuery(list).jqGrid('navGrid',pager,{edit:false,add:false,del:false,search:false});
jQuery(list).jqGrid('navButtonAdd',pager,{caption:"<img src='controller/client/themes/"+theme+"/ico/disk.png'>",                              
        title: "Экспорт в Excel",
	onClickButton:function(){
            exportExcel(list);
	} 
});
};

   ViewReports("#tbl_rep","#pg_nav");

     $("#viewwork").click(function(){
           jQuery("#tbl_rep").GridUnload("#tbl_rep");
           ViewReports("#tbl_rep","#pg_nav");
    });

Как нарисовать блок-схему на JavaScript

А в этом нам поможет плагин jsPlumb, к Jquery. В использовании он весьма прост, достаточно подключить его после jquery, а так-же css стили идущие в комплекте к jsPlumb, для преобразования в слоев в визуально приятную форму. Далее в html, расставляем div с идентификаторами и текстом внутри. После чего, простейший вызов, даст соединенные между собой div, линиями.

$(«#block1»).jsplumb({target: ‘sblock2’});

Очень простой API можно почитать здесь. У меня например получилась очень красивая картинка, при рисовании схем «Бизнес процессов:

 

111

 

Использую сей плагин, при рисовании картинок из xml. Вот пример кода вывода картинки:

<?php

// Данный код создан и распространяется по лицензии GPL v3
// Изначальный автор данного кода - Грибов Павел
// http://грибовы.рф

include_once ("../../../../config.php");                    // загружаем первоначальные настройки

// загружаем классы

include_once("../../../../class/sql.php");               // загружаем классы работы с БД
include_once("../../../../class/config.php");		// загружаем классы настроек
include_once("../../../../class/users.php");		// загружаем классы работы с пользователями
include_once("../../../../class/employees.php");		// загружаем классы работы с профилем пользователя
include_once("../../../../class/bp.php");		// загружаем классы работы c "Бизнес процессами"

// загружаем все что нужно для работы движка

include_once("../../../../inc/connect.php");		// соеденяемся с БД, получаем $mysql_base_id
include_once("../../../../inc/config.php");              // подгружаем настройки из БД, получаем заполненый класс $cfg
include_once("../../../../inc/functions.php");		// загружаем функции
include_once("../../../../inc/login.php");		// логинимся

$bpid=_GET("bpid");
function plumb($t1,$t2,$a1,$a2,$title,$color){
echo 'jsPlumb.connect({
    source:"'.$t1.'",
    target:"'.$t2.'",
    connector:["Flowchart", { curviness:70 }],
			   	anchors:["'.$a1.'", "'.$a2.'"], 
			   	paintStyle:{ 
					lineWidth:3,
					strokeStyle:"'.$color.'",
					outlineWidth:1,
					outlineColor:"#666"
				},
				endpointStyle:{ fillStyle:"#a7b04b" },
	   	overlays : [
					["Label", {													   					
						cssClass:"l1 component label",
						label : "'.$title.'", 
						location:0.1,
						id:"label"						
					}],
					["Arrow", {
						cssClass:"l1arrow",
						location:0.5, width:20,length:20

					}]
				]                                

});';    
};
echo '<div class="demo kitchensink-demo" id="kitchensink-demo">';
// читаем файл с БП и рисуем Ноды
$bp=new Tbp;
$bp->GetById($bpid);
$xml = simplexml_load_file("../../../../modules/bp/$bp->xml");
//var_dump($xml);   
               foreach($xml->step as $step){                   
                 $post=GetPostOrgByid($step->user);                
                 $color='';
                 if (($bp->node==$step->node) and ($bp->status!=2)){$color='background-color: chartreuse;';};
                 if (($step->node=="-1") and ($bp->status==2)){$color='background-color: chartreuse;';};
                 echo '<div style="'.$color.'height:'.$step->heigth.';width:'.$step->width.';top:'.$step->top.';left:'.$step->left.';" class="component window" id="window'.$step->node.'"><strong>'.$step->title.'('.$step->node.')</strong><br>'.$post.'<br><strong>'.$step->comment.'</strong></div>
                         ';
               };               
echo '</div>';
?>

<script>
jQuery(function($) {
jsPlumb.ready(function() {    
jsPlumb.deleteEveryEndpoint();    
<?php
 foreach($xml->step as $step){                   
     if ($step->accept!="") {plumb("window".$step->node,"window".$step->accept,"BottomCenter", "TopCenter","Утвердить",'#a7b04b');};
     if ($step->cancel!="") {plumb("window".$step->node,"window".$step->cancel,"BottomLeft", "TopCenter","Отменить",'#f11515');};     
     if ($step->yes!="") {plumb("window".$step->node,"window".$step->yes,"BottomCenter", "TopCenter","Да",'#a7b04b');};     
     if ($step->no!="") {plumb("window".$step->node,"window".$step->no,"Left", "TopCenter","Нет",'#f11515');};     
     if ($step->thinking!="") {plumb("window".$step->node,"window".$step->thinking,"Left", "TopCenter","Доработать",'#c9b615');};          
     if ($step->one!="") {plumb("window".$step->node,"window".$step->one,"TopLeft", "TopCenter","1",'#2c2cde');};               
     if ($step->two!="") {plumb("window".$step->node,"window".$step->two,"TopRight", "TopCenter","2",'#2c2cde');};                    
     if ($step->three!="") {plumb("window".$step->node,"window".$step->three,"BottomLeft", "TopCenter","3",'#2c2cde');};                    
     if ($step->four!="") {plumb("window".$step->node,"window".$step->four,"BottomRight", "TopCenter","4",'#2c2cde');};                         
 };                 
?>
jsPlumb.draggable(jsPlumb.getSelector(".window"), { containment:".demo"});
jsPlumb.repaintEverything();
});
});    
</script>

 

Вот файл xml:

<?xml version="1.0" encoding="UTF-8"?>
<bp>
    <name>БП "Забраковка"</name>
    <step>
        <node>1</node>
        <title>Дополнительные сведения</title>
        <comment>В комментариях укажите причину отказа в сертификации</comment>
        <user>6</user>
	<accept>24</accept>	
        <timer>1</timer>
        <top>0px</top>
        <left>0px</left>
        <width>180px</width>
        <heigth>80px</heigth>                
    </step>    
    <step>
        <node>24</node>
        <title>Продолжить работу с БП "Брак"?</title>
        <comment></comment>
        <user>3</user>
	<no>-1</no>	
	<yes>25</yes>
        <timer>1</timer>
        <top>202px</top>
        <left>50px</left>
        <width>180px</width>
        <heigth>80px</heigth>                        
    </step>

    <step>
        <node>25</node>
        <title>Переместить ТМЦ</title>
        <comment>Переместить Брак на склад Брака</comment>
        <user>4</user>
	<accept>5</accept>
        <thinking>24</thinking>
        <timer>1</timer>
        <top>34px</top>
        <left>312px</left>
        <width>180px</width>
        <heigth>80px</heigth>                        
    </step>        
    <step>
        <node>5</node>
        <title>Чей это брак?</title>
        <comment>1) Брак производства 2) Брак постащика</comment>
        <user>6</user>
        <one>7</one>
        <two>6</two>
        <thinking>24</thinking>
        <timer>1</timer>
        <top>235px</top>
        <left>398px</left>
        <width>180px</width>
        <heigth>80px</heigth>                        
    </step>
    <step>
        <node>6</node>
        <title>Что будем делать с браком?        
        1)Использовать невозможно
        2)Использовать возможно с мероприятиями
        </title>
        <comment></comment>
        <user>6</user>	
        <one>10</one>
        <two>9</two>
        <thinking>5</thinking>
        <timer>1</timer>
        <top>360px</top>
        <left>523px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>10</node>
        <title>Бухгалтерской службе необходимо переместить ТМЦ на склад невозвратного брака. Это сделано?</title>
        <comment></comment>
        <user>8</user>	
        <yes>11</yes>
        <thinking>6</thinking>
        <timer>1</timer>
        <top>490px</top>
        <left>431px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>11</node>
        <title>Снабжению необходимо вернуть ТМЦ производителю. Это сделано?</title>
        <comment></comment>
        <user>5</user>	
        <yes>-1</yes>
        <no>60</no>
        <thinking>10</thinking>
        <timer>14</timer>
        <top>650px</top>
        <left>455px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>9</node>
        <title>Будем делать вывод ТМЦ в годный ресурс?
        1) До получения компенсации
        2) После получения компенсации        
        </title>
        <comment></comment>
        <user>3</user>	
        <one>12</one>
        <two>14</two>
        <thinking>6</thinking>
        <timer>1</timer>
        <top>462px</top>
        <left>930px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>12</node>
        <title>ТМЦ переведено в годный ресурс?</title>
        <comment></comment>
        <user>6</user>	
        <yes>13</yes>
        <no>6</no>
        <timer>5</timer>
        <top>592px</top>
        <left>750px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>13</node>
        <title>Компенсация от поставщика получена?</title>
        <comment></comment>
        <user>5</user>	
        <yes>-1</yes>
        <no>60</no>
        <timer>14</timer>
        <top>1138px</top>
        <left>1013px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>14</node>
        <title>Компенсация от поставщика получена?</title>
        <comment></comment>
        <user>5</user>	
        <yes>15</yes>
        <no>60</no>
        <timer>14</timer>
        <top>807px</top>
        <left>850px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>15</node>
        <title>ТМЦ переведен в годный ресурс?</title>
        <comment></comment>
        <user>6</user>	
        <yes>-1</yes>
        <no>6</no>
        <timer>5</timer>
        <top>980px</top>
        <left>815px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>7</node>
        <title>Что будем делать с браком?
        1) Использовать с мероприятиями (исправление)
        2) Использовать невозможно</title>
        <comment></comment>
        <user>3</user>	
        <one>17</one>
        <two>16</two>
        <thinking>5</thinking>        
        <timer>1</timer>
        <top>106px</top>
        <left>610px</left>
        <width>200px</width>
        <heigth>100px</heigth>                                
    </step>
    <step>
        <node>17</node>
        <title>ТМЦ выведено (переведено) в годный ресурс?</title>
        <comment></comment>
        <user>6</user>	
        <yes>18</yes>
        <no>7</no>
        <timer>5</timer>
        <top>71px</top>
        <left>1224px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>18</node>
        <title>Расчитать финансовые потери от переделки брака. Расчитано?</title>
        <comment></comment>
        <user>11</user>	
        <yes>19</yes>
        <no>17</no>
        <timer>2</timer>
        <top>222px</top>
        <left>1297px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>19</node>
        <title>Финансовые потери компенсированы?</title>
        <comment></comment>
        <user>5</user>	
        <yes>-1</yes>
        <no>18</no>
        <timer>14</timer>
        <top>414px</top>
        <left>1380px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>16</node>
        <title>Переместить брак на склад невозвратного брака. Перемещено?</title>
        <comment></comment>
        <user>8</user>	
        <yes>20</yes>
        <no>7</no>
        <timer>1</timer>
        <top>230px</top>
        <left>980px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>20</node>
        <title>Списать по бухучету. Списано?</title>
        <comment></comment>
        <user>8</user>	
        <yes>21</yes>
        <no>16</no>
        <timer>1</timer>
        <top>370px</top>
        <left>1137px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>21</node>
        <title>Посчитать потери предприятия. Посчитано?</title>
        <comment></comment>
        <user>11</user>	
        <yes>22</yes>
        <no>20</no>
        <timer>2</timer>
        <top>622px</top>
        <left>1180px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>22</node>
        <title>Компенсировать затраты. Компенсировано??</title>
        <comment></comment>
        <user>5</user>	
        <yes>23</yes>
        <no>21</no>
        <timer>14</timer>
        <top>790px</top>
        <left>1180px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
    <step>
        <node>23</node>
        <title>Утилизировать ТМЦ. Утилизировано?</title>
        <comment></comment>
        <user>5</user>	
        <yes>-1</yes>
        <no>22</no>
        <timer>14</timer>
        <top>950px</top>
        <left>1256px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>                        
    <step>
        <node>60</node>
        <title>БП зашел в тупик. Будем запускать новый цикл?</title>
        <comment></comment>
        <user>3</user>
	<no>-1</no>	
	<yes>24</yes>
        <timer>1</timer>
        <top>1131px</top>
        <left>422px</left>
        <width>180px</width>
        <heigth>80px</heigth>                                
    </step>
   <step>
        <node>-1</node>
        <title>БП Завершен</title>
        <top>1010px</top>
        <left>146px</left>
        <width>80px</width>
        <heigth>40px</heigth>                
    </step>        

</bp>

API yandex карт и капризы с типами переменных JavaScript

При работе с API Yandex карт столкнулся наконец с еще одним недостатком JavaScript, а точнее отсутствие явного задания типа переменной. Например, долго искал ошибки в этом коде:

  lastcoors=JSON.parse(e);   // парсим JSON в массив
                              ldt=lastcoors.rows[0].cell[0];
                              lid=lastcoors.rows[0].cell[1];
                              limei=lastcoors.rows[0].cell[2];
                              lx=lastcoors.rows[0].cell[3];
                              ly=lastcoors.rows[0].cell[4];
                              lz=lastcoors.rows[0].cell[5];                             
                              myPlacemark = new ymaps.Placemark([lx, ly], {                                  
                                balloonContentHeader: "Балун метки",
                                balloonContentBody: "Содержимое <em>балуна</em> метки",
                                balloonContentFooter: "Подвал",
                                hintContent: "Хинт метки"
                                });                              
                                
                              myMap.geoObjects.add(myPlacemark);
                              myMap.panTo([lx, ly], {delay: 1500});

Метка ставится правильно, а перемещение идет невесть куда. Оказалось, что при разборе JSON, переменные lx и ly почему-то становятся строками, и если функции PlaceMark все равно с чем оперировать, с числом или строкой, то PlanTo непременно работает только с числом.

Решение: в JavaScritpt строка становится числом если участвует в математической операции.

Например:

n=1; //явное число
lx=lx*n; // lx тоже становится числом.

Итого получаем рабочий код:

  lastcoors=JSON.parse(e);   // парсим JSON в массив
                              n=1;
                              ldt=lastcoors.rows[0].cell[0];
                              lid=lastcoors.rows[0].cell[1];
                              limei=lastcoors.rows[0].cell[2];
                              lx=lastcoors.rows[0].cell[3]*n;
                              ly=lastcoors.rows[0].cell[4]*n;
                              lz=lastcoors.rows[0].cell[5]*n;                             
                              myPlacemark = new ymaps.Placemark([lx, ly], {                                  
                                balloonContentHeader: "Балун метки",
                                balloonContentBody: "Содержимое <em>балуна</em> метки",
                                balloonContentFooter: "Подвал",
                                hintContent: "Хинт метки"
                                });                              
                                
                              myMap.geoObjects.add(myPlacemark);
                              //alert(lx);alert(ly);
                              myMap.panTo([lx, ly], {delay: 1500});

Проблема получения значения из возврата функции (return) на JavaScript

Написал на днях чудную функцию:

function GetArrayEq(orgid){
$.get('controller/server/getjsonlisteq.php',
{ orgid: orgid }, 
function(e) { 
zx=JSON.parse(e);
alert(zx.rows[0].id); // здесь работает!!
return zx;
}
); 
};
var arz=GetArrayEq($("#sel_orgid :selected").val());
alert(arz.rows[0].id); // А здесь не работает!!

и долго вдумчиво смотрел грустными глазами, пытаясь понять, «А почему же она ничего не возвращает». Забыл,я воспитанник TurboPascal, что часть функций JavaScript, работает асинхронно. А конкретно здесь  $.get() — асинхронная функция. Т.е. встречая её, интерпретатор выделяет под нее отдельный поток, а сам «идет дальше», по основному коду. Т.е чтоб получить результат выполнения функции , нам необходимо отловить окончание её выполнения. Таким образом данный код некорректен в корне,а его автор мудак.

Перетаскивание изображения курсором мышки. JavaScript+Jquery+HTML5

В рамках развития проекта «Учет оргтехники в организации в браузере», возникла идея реализовать нанесение расположения единицы ТМЦ прямо на плане помещения. Однако! начнем с малого. Для начала реализовал перемещение некоего изображения курсором мышки в обозначенном квадрате. Пока реализовать смог достаточно просто, только при применении HTML5. Читать далее Перетаскивание изображения курсором мышки. JavaScript+Jquery+HTML5