我需要帮助将模态jqgrid转换为内联jqgrid [英] I need help converting a modal jqgrid to an inline jqgrid
问题描述
我在这里是一个jquery / jqgrid新手，我有一个客户端正在使用jqgrid列出自动修复的作业详细信息。现在，他们正在使用编辑和添加新作业细节的模态方法，但他们宁愿使用内联函数。我已经设法尽可能地转换网格，但我似乎无法让它正常工作。现在，他们可以使用内联函数编辑行和删除行，但是当他们去添加新行时，它仍会弹出用于添加行的模式对话框。我怀疑问题出现在$（＃list）.savGrid（代码所以我尝试将navGrid更改为inline，但是添加和删除行的按钮消失了。我试图简单地拿内联网格的教程示例并将其自定义为我们的数据结构和源，但由于我还在网格上运行自动完成和文本大小调整脚本，因此很难使用这些功能自定义示例代码而不会完全破坏网格。（I因为这是我第一次涉足jquery或jqgrid的世界，所以我甚至不确定我是如何全部工作的......我只是不断尝试不同的东西，直到我开始工作......哈哈）无论如何，这里是现在网格的代码。非常感谢任何帮助。
< script>
function autocomplete_element（value ，选项）{
//创建输入元素
var $ ac = $（'< input type =text/>'）;
//设置从jqGrid传递的值
$ ac.val（value）;
//创建自动完成
$ ac.autocomplete（{source ：editGrid.cfc？method = fnAutocomplete}）;
//将元素返回给jqGrid
返回$ ac;
}
函数autocomplete_value（elem，op，value）{
if（op ==set）{
$（elem）.val（价值）;
}
返回$（elem）.val（）;
}
$（文件）.ready（function（）{
var mkinline
$（＃list）。jqGrid（
{
url：'editGrid.cfc？method = getUsers'，//将返回用户的CFC
数据类型：'json'，//我们指定我们将使用的数据类型将是JSON
colNames：['DetailID'，'ProjectID'，'数量'，'描述'，'单价'，'总成本']，//列名
/ *
用于定义数据的列模型。请注意，您可以使列不可排序，指定宽度，对齐等。
我们还指定了editoptions，edittype = text显示了一个用于内联编辑的漂亮文本框。
我们还指定了编辑规则，说明添加/编辑需要/不需要哪些字段
* /
colModel：[
{name：'DetailID'，index：'DetailID'，align：'right'，hidden：true，editable：true}，
{name：'ProjectID'， index：'ProjectID'，width：25，hidden：true，editable：true}，
{name：'Quantity'，index：'Quantity'，editable：true，width：50，align： 'right'，edittype：'text'，editoptions：{defaultValue：'1'}}，
{name：'TaskName'，index：'TaskName'，editable：true，width：450， align：'left'，edittype：'custom'，editoptions：{'custom_element'：autocomplete_element，'custom_value'：autocomplete_value}}，
{name：'UnitPrice'，index：'UnitPrice'， editable：true，width：100，align：'right'}，
{name：'ExtendedPrice'，index：'ExtendedPrice'，editable：false，width：100，align：'right'} <无线电通信/>
]，
onSelectRow：function（id）{
if（id && id！== mkinline）{
jQuery（'#list'）。saveRow（mkinline）;
jQuery（'#list'）。editRow（id，true）;
mkinline = id;
}
}，
寻呼机：$（'＃pager'），//我们指定的div，告诉jqGrid把寻呼机放在哪里
rowNum：20，//我们想要显示每页的记录数
rowList：[]，//行列表，允许用户选择它们的行数想要查看每页
sortorder：asc，//默认排序顺序
sortname：DetailID，//默认排序列
jqModal：false，
viewrecords：false，//在寻呼机上显示好消息
imgpath：'/ js / jquery / css / start / images'，/ /上一张/下一张等图像的图像路径
标题：'项目详情'，//网格名称
身高：'自动'，//我喜欢自动，所以两者之间没有空白。使用固定高度可能意味着在寻呼机之前滚动条或空白区域
宽度：823，
mtype：'GET'，
recordtext：''，//在演示中你会注意到7 Total Records - Total Reocrds文本来自这里
pgtext：''，//你注意到1/3，你可以改变/。你可以说1/3
editurl：editGrid.cfc？method = addeditUser，//添加/编辑函数调用
工具栏：[false，顶部]，//在顶部显示工具栏。我们将用它来显示用户反馈
//网格加载完毕后要做的事情
loadComplete：function（）{
//我们得到网格的Userdata。
var recorddata = $（＃list）。getUserData（）;
//显示工具栏中的msg
$（＃t_list）。html（recorddata.MSG）;
}，
// JSON阅读器。这定义了从CFC返回的JSON数据应该是什么样子
jsonReader：{
root：ROWS，//我们的数据
页面：PAGE，//当前页
总计：TOTAL，//总页数
记录：RECORDS，//总记录
userdata：USERDATA，//用户数据我们会传回来反馈
cell：，//未使用
id：0/ /将默认为第一栏
}
}
）;
//将工具栏文本颜色设置为蓝色
$（＃t_list）。css（color，blue）;
//这里我们使用navGrid显示带有标签Filter的Search按钮，并启用添加/编辑/删除按钮。
$（＃list） .navGrid（
#pager，{add：true，edit：false，addtext：，deltext：，del：true，search：false，refresh：true}，//我们将指定自定义搜索/刷新按钮
{reloadAfterSubmit：true，afterSubmit：commonSubmit，closeAfterEdit：true，width：400}，//编辑对话框的选项
{reloadAfterSubmit：true，afterSubmit：commonSubmit，closeAfterAdd：false，width：400}，//添加对话框的选项
{url：editGrid.cfc？method = delUser，closeAfterDelete ：true，reloadAftersubmit：false，afterSubmit：commonSubmit，caption：Delete，msg：Delete selected，width：400} // Del Dialog的选项
）.navButtonAdd（'＃ pager'，{caption：，title：Reload Form，buttonimg：'/ js / jquery / css / start / im ages / refresh.gif'，onClickButton：function（id）//刷新按钮
{
//我们重置搜索表单（清除任何表单值）
resetForm（）;
//我们在下面的gridSearch函数中为搜索更改网格URL时重置网格URL。这会将网格重置为原始状态
$（＃list）。setGridParam（
{
url：editGrid.cfc？ method = getUsers，
页：1
}
）.trigger（oadGrid）; //重新加载网格触发器
}
}）;
}
）; //结束document.ready功能
//此功能将执行搜索我们
function gridSearch（）
{
//从搜索表单中获取值。使用jquery非常简单。
var pid = $（＃ProjectID）。val（）;
var qty = $（＃Quantity）。val（） ;
var tn = $（＃TaskName）。val（）;
var up = $（＃UnitPrice）。val（）;
var ep = $（＃ExtendedPrice）。val（）;
//我们设置网格URL并为搜索传递一些额外的参数。
$（＃list）。setGridParam（
{
url：editGrid.cfc？method = getUsers&ProjectID =+ pid +&Quantity =+ qty + &TaskName =+ tn +&UnitPrice =+ up +&ExtendedPrice =+ ep，
页数：1
}
）.trigger （reloadGrid）; //重新加载网格触发器
$（＃filter）。jqmHide（）; //隐藏我们的搜索/过滤器窗口对话框
返回false
}
//在添加/编辑发生后调用此函数。我们只需从响应中获取MSG并将其显示在工具栏中。
//注意，由于我们在添加/编辑后重新加载网格，因此msg只会在短时间内显示或所以
函数commonSubmit（data，params）
{
var a = eval（（+ data.responseText +）） ; //将返回的字符串转换为JSON
$（＃t_list）。html（a.USERDATA.MSG）;
resetForm（）; //清除我们的搜索表格
返回true;
}
//清除表格
function resetForm（）
{
window.location.reload（false）;
}
< / script>
（＃list）。navGrid（代码所以我尝试将navGrid更改为inline，但是添加和删除行的按钮消失了。我试过简单获取内联网格的教程示例并将其自定义为我们的数据结构和源，但由于我还有自动完成和文本res在网格上运行脚本，很难使用这些功能自定义示例代码，而不会完全破坏网格。 （我甚至不确定我是如何在第一时间完成这项工作的，因为这是我第一次涉足jquery或jqgrid的世界......我只是不断尝试不同的东西，直到我开始工作......哈哈）无论如何，这是现在的网格代码。任何帮助将不胜感激。
< script>
函数autocomplete_element（value，options）{
//创建输入元素
var
ac =
（'< input type =text/>'）;
//将值设置为从jqGrid传递的值
I'm a jquery/jqgrid newbie here and I have a client that is using a jqgrid to list the job details on auto repairs. Right now, they're using the modal method of editing and adding new job details, but they'd rather use the inline functions. I've managed to convert the grid the best I can, but I can't seem to get it working properly. Right now, they can edit rows and delete rows using the inline function but when they go to add a new row, it still pops up the modal dialog box for adding the row. I suspect that the problem is somewhere in the $("#list").navGrid( code so I tried changing "navGrid" to "inline" but then the buttons for adding and deleting a row disappear. I've tried to simply take the tutorial example for inline grids and customize it to our data structure and sources, but since I also have auto complete and text resizing scripts running on the grid, it's difficult to customize the example code with these features without breaking the grid altogether. (I'm not even sure how I got it all to work in the first place since this was my first foray into the world of jquery or jqgrid...I just kept trying different things until I got it working...lol) Anyway, here's the code for the grid as it stands now. Any help would be greatly appreciated.
<script>
function autocomplete_element(value, options) {
// creating input element
var $ac = $('<input type="text"/>');
// setting value to the one passed from jqGrid
$ac.val(value);
// creating autocomplete
$ac.autocomplete({source: "editGrid.cfc?method=fnAutocomplete"});
// returning element back to jqGrid
return $ac;
}
function autocomplete_value(elem, op, value) {
if (op == "set") {
$(elem).val(value);
}
return $(elem).val();
}
$(document).ready(function() {
var mkinline
$("#list").jqGrid(
{
url:'editGrid.cfc?method=getUsers', //CFC that will return the users
datatype: 'json', //We specify that the datatype we will be using will be JSON
colNames:['DetailID', 'ProjectID','Qty.','Description','Unit Price','Total Cost'], //Column Names
/*
The Column Model to define the data. Note you can make columns non sortable, specify width, alignment, etc.
We also specify the editoptions, edittype=text shows a nice textbox for inline edit.
We have also specified Edit Rules, to say which fields are required/not required for add/edit
*/
colModel :[
{name:'DetailID', index:'DetailID', align:'right', hidden:true, editable:true},
{name:'ProjectID', index:'ProjectID', width:25, hidden:true, editable:true},
{name:'Quantity', index:'Quantity', editable:true, width:50, align:'right', edittype:'text', editoptions: {defaultValue:'1'}},
{name:'TaskName', index:'TaskName', editable:true, width:450, align:'left', edittype: 'custom', editoptions: {'custom_element' : autocomplete_element, 'custom_value' : autocomplete_value}},
{name:'UnitPrice', index:'UnitPrice', editable:true, width:100, align:'right'},
{name:'ExtendedPrice', index:'ExtendedPrice', editable:false, width:100, align:'right'}
],
onSelectRow: function(id){
if(id && id!==mkinline){
jQuery('#list').saveRow(mkinline);
jQuery('#list').editRow(id,true);
mkinline=id;
}
},
pager: $('#pager'), //The div we have specified, tells jqGrid where to put the pager
rowNum:20, //Number of records we want to show per page
rowList:[], //Row List, to allow user to select how many rows they want to see per page
sortorder: "asc", //Default sort order
sortname: "DetailID", //Default sort column
jqModal: false,
viewrecords: false, //Shows the nice message on the pager
imgpath: '/js/jquery/css/start/images', //Image path for prev/next etc images
caption: 'Project Details', //Grid Name
height:'auto', //I like auto, so there is no blank space between. Using a fixed height can mean either a scrollbar or a blank space before the pager
width:823,
mtype:'GET',
recordtext:'', //On the demo you will notice "7 Total Records" - The Total Reocrds text comes from here
pgtext:'', //You notice the 1/3, you can change the /. You can make it say 1 of 3
editurl:"editGrid.cfc?method=addeditUser", //The Add/Edit function call
toolbar:[false,"top"], //Shows the toolbar at the top. We will use it to display user feedback
//Things to do when grid is finished loading
loadComplete:function(){
//We get the Userdata for the grid.
var recorddata = $("#list").getUserData();
//show the msg in the toolbar
$("#t_list").html(recorddata.MSG);
},
//The JSON reader. This defines what the JSON data returned from the CFC should look like
jsonReader: {
root: "ROWS", //our data
page: "PAGE", //current page
total: "TOTAL", //total pages
records:"RECORDS", //total records
userdata:"USERDATA", //Userdata we will pass back for feedback
cell: "", //Not Used
id: "0" //Will default to first column
}
}
);
//Set toolbar text color to blue
$("#t_list").css("color","blue");
//Here we use the navGrid to display the Search button with label Filter, and enable the add/edit/delete buttons.
$("#list").navGrid(
"#pager",{add:true,edit:false,addtext:"",deltext:"",del:true,search:false,refresh:true},//We will specify custom search/refresh buttons
{reloadAfterSubmit:true,afterSubmit:commonSubmit,closeAfterEdit:true,width:"400"},//Options for the Edit Dialog
{reloadAfterSubmit:true,afterSubmit:commonSubmit,closeAfterAdd:false,width:"400"},//Options for the Add Dialog
{url:"editGrid.cfc?method=delUser",closeAfterDelete:true,reloadAftersubmit:false,afterSubmit:commonSubmit,caption:"Delete",msg:"Delete selected",width:"400"}//Options for Del Dialog
).navButtonAdd('#pager',{caption:"",title:"Reload Form",buttonimg:'/js/jquery/css/start/images/refresh.gif',onClickButton:function(id)//The refresh button
{
//We reset our search form (clear any form values)
resetForm();
//We reset the Grid URL as we change it for the search in the gridSearch function below. This resets the grid to its original state
$("#list").setGridParam(
{
url:"editGrid.cfc?method=getUsers",
page:1
}
).trigger("reloadGrid");//Reload grid trigger
}
});
}
);//End document.ready function
//This function will perform the search for us
function gridSearch()
{
//Get the values from the search form. Very simple using jquery.
var pid = $("#ProjectID").val();
var qty = $("#Quantity").val();
var tn = $("#TaskName").val();
var up = $("#UnitPrice").val();
var ep = $("#ExtendedPrice").val();
//We set the grid URL and pass in some extra params for the search.
$("#list").setGridParam(
{
url:"editGrid.cfc?method=getUsers&ProjectID="+pid+"&Quantity="+qty+"&TaskName="+tn+"&UnitPrice="+up+"&ExtendedPrice="+ep,
page:1
}
).trigger("reloadGrid");//Reload grid trigger
$("#filter").jqmHide();//Hide our search/filter window dialog
return false
}
//This function is called after an add/edit happens. We just take the MSG from the response and display it in the toolbar.
//Note currently, since we reload the grid after the add/edit, the msg will only be visible for a short second or so
function commonSubmit(data,params)
{
var a = eval( "(" + data.responseText + ")" );//Convert returned string into JSON
$("#t_list").html(a.USERDATA.MSG);
resetForm();//Clear our search form
return true;
}
//Clear our form
function resetForm()
{
window.location.reload(false);
}
</script>
("#list").navGrid( code so I tried changing "navGrid" to "inline" but then the buttons for adding and deleting a row disappear. I've tried to simply take the tutorial example for inline grids and customize it to our data structure and sources, but since I also have auto complete and text resizing scripts running on the grid, it's difficult to customize the example code with these features without breaking the grid altogether. (I'm not even sure how I got it all to work in the first place since this was my first foray into the world of jquery or jqgrid...I just kept trying different things until I got it working...lol) Anyway, here's the code for the grid as it stands now. Any help would be greatly appreciated.
<script>
function autocomplete_element(value, options) {
// creating input element
var
ac =
('<input type="text"/>');
// setting value to the one passed from jqGrid
这篇关于我需要帮助将模态jqgrid转换为内联jqgrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
