0
Я пытаюсь создать сценарий с использованием FLEXIGRID как метод отображения информации из базы данных, но я хочу, чтобы пользователи могли также вводить информацию в базу данных. Я хотел бы иметь возможность запускать модальное окно, в котором пользователь может вводить информацию и отправлять ее. Путь кнопка на Flexigrid кодируется выглядит следующим образом:flexigrid popup modal window
$(document).ready(function(){
$("#flex1").flexigrid
(
{
url: 'post2.php',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center', hide: true},
......
buttons : [
{name: 'Add', bclass: 'add', onpress : test},
{separator: true},
{name: 'Delete', bclass: 'delete', onpress : test},
{separator: true},
.... some more code ...
}
);
});
function test(com,grid)
{
if (com=='Add')
{
the code that triggers the modal window
}
}
Хорошо, моя проблема:
Когда я нажимаю «Добавить», я хотел бы модальное всплывающее окно появится для загрузки с использованием Ajax в содержимое локального файла, чтобы пользователь мог ввести информацию.
То, что я до сих пор:
Я попытался с помощью кода из JqModal: загрузки CSS и Javascript:
<link rel="stylesheet" type="text/css" href="css/jqmodal.css" />
<script type="text/javascript" src="js/jqModal.js"></script>
$().ready(function() {
$('#ex2').jqm({ajax: 'examples/2.html', trigger: 'a.ex2trigger'});
});
добавил DIV в нижней части страницы:
<div class="jqmWindow" id="ex2">
Please wait... <img src="inc/busy.gif" alt="loading" />
</div>
но как вызвать функцию?
Thanks, Cristian.
LE: Это код, я прямо сейчас, и он до сих пор не работает:
IE говорит: Объект не поддерживает это свойство или метод Flexigrid, строка 56 символов 5 Вот именно там, где диалог $ запускается функция.
<!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=iso-8859-1" />
<title>Flexigrid</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.3.custom.css" />
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/flexigrid.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.3.custom.min.js.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flex1").flexigrid
(
{
url: 'post2.php',
dataType: 'json',
colModel : [
{display: 'ID', name : 'id', width : 40, sortable : true, align: 'center', hide: true},
{display: 'URL', name : 'url', width : 450, sortable : true, align: 'left'},
{display: 'File Name', name : 'filename', width : 270, sortable : true, align: 'left'},
{display: 'Availability', name : 'availability', width : 50, sortable : true, align: 'center'},
{display: 'State', name : 'state', width : 40, sortable : true, align: 'center'},
{display: 'Total Size', name : 'totalsize', width : 90, sortable : false, align: 'center'},
{display: 'Current Size', name : 'currentsize', width : 90, sortable : false, align: 'center'},
{display: 'Procent', name : 'procent', width : 40, sortable : true, align: 'center'},
{display: 'Log', width : 20, sortable : false, align: 'center'},
],
buttons : [
{name: 'Add', bclass: 'add', onpress : test},
{separator: true},
{name: 'Delete', bclass: 'delete', onpress : test},
{separator: true},
{name: 'Select All', bclass : 'selectall', onpress : test},
{name: 'DeSelect All', bclass : 'deselectall', onpress : test},
{separator: true}
],
searchitems : [
{display: 'URL', name : 'url'},
{display: 'Filename', name : 'filename', isdefault: true}
],
sortname: "state",
sortorder: "asc",
usepager: true,
title: '',
useRp: false,
rp: 10,
showTableToggleBtn: true,
singleSelect: true
}
);
});
$(document).ready(function() {
$("#myDialog").dialog({
autoOpen: false,
resizable: false,
position: 'center',
stack: true,
height: 'auto',
width: 'auto',
modal: true
});
$("#showDialog").button().click(function (event) {
$("#myDialog").dialog('open');
});
});
function test(com,grid)
{
if (com=='Add') {
$("#myDialog").dialog('open');
}
if (com=='Select All')
{
$('.bDiv tbody tr',grid).addClass('trSelected');
}
if (com=='DeSelect All')
{
$('.bDiv tbody tr',grid).removeClass('trSelected');
}
if (com=='Delete')
{
if($('.trSelected',grid).length>0){
if(confirm('Delete ' + $('.trSelected',grid).length + ' items?')){
var items = $('.trSelected',grid);
var itemlist ='';
for(i=0;i<items.length;i++){
itemlist+= items[i].id.substr(3)+",";
}
$.ajax({
type: "POST",
url: "delete.php",
data: "items="+itemlist,
success: function(data){
$('#flex1').flexReload();
alert(data);
}
});
}
} else {
return false;
}
}
}
</script>
</head>
<body>
<table id="flex1" style="display:none"></table>
<div id="myDialog" style="display:none" title=""></div>
</body>
</html>
LE2: Как загрузить внешний файл через AJAX:
$(document).ready(function(){
//define config object
var dialogOpts = {
modal: true,
bgiframe: true,
autoOpen: false,
height: 500,
width: 500,
draggable: true,
resizeable: true,
open: function() {
//display correct dialog content
$("#myDialog").load("form.php");}
};
$("#myDialog").dialog(dialogOpts); //end dialog
$('#showdialog').click(function (event){
$("#myDialog").dialog("open");
return false;
}
);
});
Привет Лоренцо, К сожалению, я не могу заставить его работать , если я копирую/вставляю код, сетка даже не загружается. Заметьте, что сказать. Спасибо, C. – Chris19
Включили ли вы javascript-файл jQuery jQuery и css? – Lorenzo
Посмотрите мое обновление в конце ответа – Lorenzo