jqGrid | 添加編輯刪除按鈕不起作用
[英]jqGrid | add-edit-delete buttons not working
問題描述
抱歉，如果我的問題很簡單，我對jqGrid完全陌生：)
1-我想使用jqGrid的（添加，編輯，刪除）功能，如您所見，我的網格的頁腳部分有按鈕，但是當我單擊時，只有一個對話框出現，沒有字段可輸入！ 我希望它就像此頁面一樣，可以 看到發生的事情的屏幕圖片！
2-當我單擊提交按鈕（修復了第1部分之后）時，我想知道數據如何發布到服務器，該怎么辦！ 無論使用哪種語言，我都不想例如將它們作為對象或某物發送，而不要知道如何處理它們！
tnx很多
我的源代碼：
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index Page</title>
<!-- external scripts -->
<!-- jQuery & Bootstrap -->
<script type="text/javascript" src="{% static "js/jquery.js" %}"/></script>
<script type="text/javascript" src="{% static "js/jquery.jqGrid.min.js" %}"/></script>
<link rel="stylesheet" type="text/css" media="all" href="{% static "css/bootstrap.min.css?id=1" %}"/>
<script type="text/javascript" src="{% static "js/bootstrap.min.js" %}"/></script>
<!-- jQuery & Bootstrap -->
<!-- jqGrid -->
<link rel="stylesheet" type="text/css" media="screen" href="{% static "css/ui.jqgrid.css" %}" />
<link rel="stylesheet" type="text/css" media="screen" href="{% static "css/ui-lightness/jquery-ui.min.css" %}" />
<script type="text/javascript" src="{% static "js/grid.locale-en.js" %}"/></script>
<!-- jqGrid -->
<!-- own implemented scripts -->
<script type="text/javascript" src="{% static "js/script.js" %}"/></script>
<!-- own implemented scripts -->
<!-- external scripts-->
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url: "http://localhost:8000/getdata",
datatype: "json",
mtype: "GET",
colNames: ["شناسه", "کد","نام", "عنوان" ,"عنوان انگلیسی", "ظرفیت", "ظرفیت اضافه","قیمت روز"],
colModel: [
{ name: "id", index:"id", width: 60 , editable:true,editoptions: {readonly: "readonly"}},
{ name: "code", width: 60 , editable:true},
{ name: "name", width: 90 , editable:true},
{ name: "title", width: 90 ,editable:"true", editable:true},
{ name: "english_title", width: 100, align: "left", editable:true },
{ name: "capacity", width: 90, align: "left", editable:true },
{ name: "extra_capacity", width: 90, align: "left", editable:true },
{ name: "today_price", width: 80, align: "left" , editable:true},
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager',
loadonce:true,
sortname: 'id',
viewrecords: true,
sortorder: "desc",
rownumbers: true,
rownumWidth: 40,
gridview: true,
multiselect: false,
caption: "اتاق ها",
onSelectRow: function(ids) {
if(ids == null) {
ids=0;
if(jQuery("#list_d").jqGrid('getGridParam','records') >0 )
{
jQuery("#list_d").jqGrid('setGridParam',{url:"getpricelist?q=1&id="+ids,page:1}).trigger('reloadGrid');
}
} else {
jQuery("#list_d").jqGrid('setGridParam',{url:"getpricelist?q=1&id="+ids,page:1}).trigger('reloadGrid');
jQuery("#list_d").jqGrid('setCaption',"لیست قیمت اتاق شماره : "+ids)
}
}
});
jQuery("#list").jqGrid('navGrid','#pager',{edit:true,add:true,del:true,search:false},
/* {
recreateForm: true,
beforeShowForm: function ($form) {
$form.find(".FormElement[readonly]")
.prop("disabled", true)
.addClass("ui-state-disabled")
.closest(".DataTD")
.prev(".CaptionTD")
.prop("disabled", true)
.addClass("ui-state-disabled")
},
}, */
//edit options
{ // Edit option (parameters of editGridRow method)
recreateForm:true,
reloadAfterSubmit:true,
closeOnEscape:true,
savekey: [true,13],
closeAfterEdit:true,
url:'/edit',
ajaxEditOptions: {
beforeSend: function(jqXHR) {
var csrf_token = getCookie('csrftoken');
jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
}
},
afterSubmit: function () {
jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
console.log('changed data type');
return [true];
},
editData: {
csrfmiddlewaretoken: getCookie('csrftoken')
}
},
//add options
{
recreateForm:true,
reloadAfterSubmit:true,
closeOnEscape:true,
savekey: [true,13],
closeAfterAdd: true,
url:'/add',
ajaxEditOptions: {
beforeSend: function(jqXHR) {
var csrf_token = getCookie('csrftoken');
jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
}
},
afterSubmit: function () {
jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
console.log('changed data type');
return [true];
},
editData: {
csrfmiddlewaretoken: getCookie('csrftoken')
}
},
//delete options
{
recreateForm:true,
reloadAfterSubmit:true,
closeOnEscape:true,
savekey: [true,13],
url:'/delete',
ajaxEditOptions: {
beforeSend: function(jqXHR) {
var csrf_token = getCookie('csrftoken');
jqXHR.setRequestHeader('X-CSRF-Token', csrf_token);
}
},
afterSubmit: function () {
jQuery("#list").jqGrid("setGridParam", {datatype: 'json'});
console.log('changed data type');
return [true];
},
editData: {
csrfmiddlewaretoken: getCookie('csrftoken')
}
}
);
jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
jQuery("#list_d").jqGrid({
height: 100,
width:345,
url:'getpricelist?q=1&id=2',
datatype: "json",
colNames:['از','تا', 'قیمت'],
colModel:[
{name:'from',index:'from', width:100},
{name:'to',index:'to', width:100},
{name:'price',index:'price', width:80, align:"right"},
],
rowNum:5,
rowList:[5,10,20],
pager: '#pager_d',
sortname: 'item',
viewrecords: true,
sortorder: "asc",
multiselect: false,
caption:"لیست قیمت"
}).navGrid('#pager_d',{add:false,edit:false,del:false});
});
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
<table id="list_d"></table>
<div id="pager_d"></div>
</body>
</html>
views.py
from django.shortcuts import render
from django.utils import simplejson
from django.http import HttpResponse
from rooms.models import *
from django.db.models import Q
from django.core import serializers
def index(request):
return render(request, 'index.html')
def getdata(request):
data=room_type.objects.all()
json=[]
for o in data:
json.append({'id':o.id, 'code':o.code,'name':o.name,'title':o.title,
'english_title':o.english_title, 'capacity':o.capacity,
'extra_capacity':o.extra_capacity, 'today_price':o.today_price })
return HttpResponse(simplejson.dumps(json), mimetype='application/json',content_type='application/json' )
def getpricelist(request):
requested_room_id = request.GET.get('id', '')
room = room_type.objects.get(id = requested_room_id)
price_list_set = room.price_list_set.all()
json=[]
for price_list in price_list_set:
json.append({'from':price_list.from_date, 'to':price_list.to_date, 'price':price_list.price})
return HttpResponse(simplejson.dumps(json), mimetype='application/json',content_type='application/json' )
def edit(request):
print "################ediit#################"
return render(request, 'index.html')
def add(request):
print "################addddddddddd#################"
return render(request, 'index.html')
def delete(request):
print "################deeeeeeeeeeeeeel#################"
return render(request, 'index.html')
1 個解決方案
解決方案1
2 已采納 2014-07-31 10:28:05
第一個問題很容易解決。 編輯表單（添加和編輯）僅包含有關可編輯列的信息。 因此，您需要在colModel每個列中包括要允許用戶進行編輯的editable: true屬性。
重要的是要了解colModel每個已知屬性都有默認值 。 我建議你檢查的最后一個（“默認”）表列的位置的文件。 您會發現align默認值為"left" ，因此您可以從所有colModel項中刪除align: "left" 。 同樣，您可以看到editable屬性的默認值為false 。 這樣您之所以具有空的編輯表單的原因。 如果需要將cmTemplate editable: true設置為colModel的一半，我建議您使用cmTemplate選項（有關更多詳細信息，請參見答案 ）。 例如，在包含cmTemplate: {editable: true}選項之后，您需要在所有您不想使其可編輯的列中包括editable: false 。 所有其他列將是可編輯的。
如果您需要在“添加/編輯”表單中包括一些列信息，但不允許用戶對其進行編輯，則可以使用editable: true以及editoptions: {readonly: "readonly"}或editoptions: {disabled: "disabled"} 。 該選項將把信息包括在編輯表單中，但在相應的編輯字段上設置其他readonly="readonly"或disabled="disabled"屬性。 如答案中所述，可以在此類文件上添加其他"ui-state-disabled"類。 通過這種方式，您可以使某些字段可編輯，但是僅用於例如“添加”對話框中，並在“編輯”對話框中將其保持為禁用/只讀狀態。 不要忘記使用recreateForm: true選項。
為了使編輯成功，正確填充網格的rowid非常重要。 如果您具有name: "id"列，或者某個列具有key: true屬性，則相應的值將用作行ID。 將在此處 （關於編輯）， 此處 （關於添加）和此處 （關於Delele）中描述將發送到服務器的信息。 該信息始終包含id=rowidvalue屬性。 添加/編輯表單以以下形式發布有關所有（包括隱藏的）可編輯列的其他信息： name=value ，其中name是colModel列定義的name屬性的值。
將jqGrid與ArrayData一起使用，並使用添加，編輯和刪除按鈕
[英]Using jqGrid with ArrayData and using the add, edit and delete buttons
禁用jqgrid的編輯（添加，編輯和刪除）按鈕，而不是隱藏（默認行為）
[英]Disable edit(add, edit and delete) buttons of jqgrid instead of hiding(default behaviour)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.