个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
Jqgrid 对我来说是新的。所以请帮助我。我的代码在下面，但我想在每一行中添加一个编辑按钮。请给我答案，当我单击编辑按钮时，它会转到下一个通过查询字符串选择 ID 的页面。
<body>
<table style="border: solid 15px red; width: 100%; vertical-align: central;">
<tr>
<td style="padding-left: 20px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue; font-family: 'Times New Roman'; font-weight: bold; font-size: 20pt; color: chocolate;">jQ Grid Example In ASP.NET C#
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: central; padding: 50px;">
<table id="dataGrid" style="text-align: center;">
</table>
<div id="pagingGrid"></div>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
$(function () {
debugger;
$("#dataGrid").jqGrid({
url: 'CityGrid.aspx/GetDataFromDB',
datatype: 'json',
mtype: 'POST',
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
ajaxGridOptions: { contentType: "application/json" },
loadonce: true,
colNames: ['CityId', 'CityName'],
colModel: [
{ name: 'CityId', index: 'CityId', width: 140 },
{ name: 'CityName', index: 'CityName', width: 160 },
],
pager: '#pagingGrid',
rowNum: 5,
rowList: [10, 20, 30],
viewrecords: true,
gridview: true,
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "0"
},
caption: 'jQ Grid Example'
});
});
</script>
最佳答案
试试这个。将 colModel 更改为如下所示:
colModel: [
{ name: 'CityId', index: 'CityId', width: 140},
{ name: 'CityName', index: 'CityName', width: 160 },
{ name: 'action', index: 'action', width: 75, sortable: false, jsonmap: "CityId",
formatter:function (cellvalue, options, rowObject) {
return "<input type='button' value='somevalue' onclick='some_function'\>";
}
}
],
更新完整代码:
<!--
1) On Double click - Edit the row
2) On select (checking checkbox) - Edit the row
3) On click of Select All (multiselect checkbox) - Edit All rows
4) Sorting of ALL columns at any time (that means even if one or more row(s) is/are in edit mode, sorting should work for all columns with edit value )
5)
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>http://stackoverflow.com/a/20165553/315935</title>
<meta name="author" content="Oleg Kiriljuk">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<style>
html, body { font-size: 75%; }
.frozen-bdiv {
top: 83px !important;
}
.ui-datepicker select.ui-datepicker-year,
.ui-datepicker select.ui-datepicker-month {
color: black
}
.ui-jqgrid >.ui-jqgrid-pager .navtable,
.ui-jqgrid >.ui-jqgrid-view > .ui-jqgrid-toppager .navtable {
font-size: 16px;
}
.ui-pg-table .ui-pg-button:hover {
border: 0 none;
background: #b6dbf7 url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}
.ui-pg-table .ui-pg-table .ui-pg-button:hover {
font-weight: normal;
padding: 0;
margin: 3px;
}
.ui-jqgrid .ui-pg-table.navtable .ui-pg-button:hover {
font-weight: normal;
padding: 0;
margin: 2px;
}
.ui-jqgrid .jqgrow .ui-jqgrid-actions > .ui-pg-div:hover {
margin: 0 1px;
border: 0 none;
background: #b6dbf7 url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<!--<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>-->
<script>
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<!--<script src="../jqGrid/js/jquery.jqGrid.src.js"></script>-->
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<!--<script src="http://www.ok-soft-gmbh.com/jqGrid/OK/plugins/jQuery.jqGrid.fontAwesome4.js"></script>
<script src="http://www.ok-soft-gmbh.com/jqGrid/OK/plugins/jQuery.jqGrid.checkboxFontAwesome4.js"></script>-->
<script>
function some_function(clientName) {
alert("..." + clientName);
}
//<![CDATA[
/*global $ */
/*jslint browser: true */
$(function () {
"use strict";
var mydata = [
{ id: "10", invdate: "2007-10-01", name: "test", note: "note", amount: "", tax: "", closed: true, ship_via: "TN", total: "" },
{ id: "20", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "30", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "40", invdate: "2007-10-04", name: "test4 test4 test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "50", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "60", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ id: "70", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ id: "80", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ id: "90", invdate: "2007-09-01", name: "test9 test9 test9 test9 test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ id: "100", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ id: "110", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ id: "120", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
$grid = $("#list"),
initDateEdit = function (elem) {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
initDateSearch = function (elem) {
setTimeout(function () {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true
});
}, 100);
},
integerTemplate = {formatter: "integer", align: "right", sorttype: "integer",
editrules: {number: true, required: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }},
numberTemplate = {formatter: "number", align: "right", sorttype: "number",
editrules: {number: true, required: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"] }};
$.extend(true, $.jgrid.icons, {
common: "fa fa-lg"
});
$grid.jqGrid({
data: mydata,
colNames: ["", "Client", "Date", "Amount", "Tax", "Total", "Closed", "Shipped via", "Notes", "action"],
colModel: [
{ name: "act", template: "actions", width: 60 },
{ name: "name", align: "center", width: 65, frozen: true, editrules: {required: true} },
{ name: "invdate", width: 80, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y", reformatAfterEdit: true }, datefmt: "d-M-Y",
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "amount", width: 200, template: "number" },
{ name: "tax", width: 52, template: "number", autoResizableMinColSize: 40 },
{ name: "total", width: 60, template: "number" },
{name: "closed", width: 70, align: "center", formatter: "checkboxFontAwesome4", //formatter: "checkbox",
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
{name: "ship_via", width: 105, align: "center", formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
{ name: "note", width: 60, edittype: "textarea" },
{ name: 'action', index: 'action', width: 75, sortable: false, jsonmap: "name",
formatter:function (cellvalue, options, rowObject) {
return "<input type='button' value='Details' onclick='some_function(\""+cellvalue+"\")'\>";
}
}
],
cmTemplate: { editable: true, autoResizable: true },
rowNum: 100,
autoResizing: { compact: true },
resizeStop: function () {
var newWidth = this.grid.newWidth, maxIterations = 3, i;
for (i = 0; i < maxIterations; i++) {
// resize without shrinking
$(this).jqGrid("setGridWidth", newWidth + i, false);
if (this.grid.bDiv.offsetHeight <= this.grid.bDiv.clientHeight) {
break;
}
}
},
// rowList: [5, 10, 20],
pager: "#pager", // "#pa\\.ger" or "pa.ger"
pgtext : "",
pginput: false,
pgbuttons: false,
viewrecords: true,
gridview: true,
iconSet: "fontAwesome",
toppager: false,
bottompager: false,
toolbar: [false, "both"],
footerrow: false,
multiselect: true,
rownumbers: false,
//direction: "rtl",
//recordpos: "left",
//cellEdit: true,
//beforeSaveCell: function (rowid, name, value, iRow, iCol) {
// var cm = this.p.colModel[iCol];
// return cm.formatter !== "date" ? value : $.unformat.date.call(this, value, cm);
//},
sortname: "invdate",
sortorder: "desc",
resizeDblClick: function (iCol, cm) {
//alert("DblClick on the column resizer of the column \"" + cm.name + "\"");
//autoResizeColumn.call(this, iCol);
},
ondblClickRow: function(id){
$grid.jqGrid("setSelection", id); // Select the row on Double Click
$grid.jqGrid('editRow', id, true); // Edit the row on Double Click
},
onSelectRow: function (rowid, stat, e) {
return;
},
inlineEdit: {
keys: true
},
//viewsortcols: [true, "horizontal", false], // [true, "vertical", false] or [true, "vertical", false]
//subGrid: true,
subGridRowExpanded: function (subgridDivId, rowId) {
$("#" + $.jgrid.jqID(subgridDivId)).html("<em>simple subgrid data for the row with id=" + rowId + "</em>");
},
caption: "Demonstration of the usage sortable:true and frozen formatter: \"actions\"",
width: 500,
height: 200,
sortable: true,
//height: 100,
shrinkToFit: false,
autoresizeOnLoad: true
});
//$grid.jqGrid("setFrozenColumns");
//$grid.jqGrid("navGrid", "#pager", {view: true, cloneToTop: true/*, position: "right"*/})
$grid.jqGrid("navGrid", "#pager", { resize: false, add: false, search: false, del: false, refresh: false, edit: false, alerttext: 'Please select one user' })
.jqGrid("inlineNav", "#list_toppager")
// .jqGrid("inlineNav", "#pager")
.jqGrid("filterToolbar");
//$grid.jqGrid("destroyFrozenColumns");
$grid.jqGrid("setFrozenColumns");
//$grid.trigger("jqGridResetFrozenHeights");
//$.jgrid.info_dialog($.jgrid.errors.errcap, "Test message", $.jgrid.edit.bClose);
//$grid.jqGrid("sortableRows");
//$("#outerDiv").show();
//$grid.jqGrid("autoResizeAllColumns");
$grid.jqGrid("gridResize"); // , {handles: "e, w", shrinkToFit: false}
//var allData = $grid.jqGrid("getRowData");
$(window).on("resize", function() {
$("table.ui-jqgrid-btable").each(function () {
$(this).trigger("jqGridResetFrozenHeights");
});
});
// Custom row to do Mass Edit
var t1 = '<div style="POSITION: absolute; TOP: 56px; left: -2px;"><table><tr id="massEditFrizenTR" >'
+' <th style= "width: 21px; text-align: left; vertical-align: top; padding-left: 0px !important;" class="noBoderTD"> </th> '
+' <th style= "width: 60px;"> </th><th width="136" class="massEditClient"> </th>'
+' <th width="68" class="massEditDate"> </th>';
var t2 = '<tr id="massEditTR" > '
+' <th style= "width: 21px; text-align: left; vertical-align: top; padding-left: 0px !important;" class="noBoderTD"> </th> '
+' <th style= "width: 60px;"> </th>'
+' <th width="136" class="massEditClient"> </th>'
+' <th width="68" class="massEditDate"> </th>'
+' <th width="52" class="massEditAmount ui-search-input"> <SELECT id="massEditAmoutSelect" name="massEditAmoutSelect" style="width: 11;"><OPTION value="Select">Select</OPTION><OPTION value="High">100</OPTION><OPTION value="Medium">200</OPTION><OPTION value="Low">300</OPTION></SELECT></th>'
+' <th width="33" class="massEditTax"> </th>'
+' <th width="38" style="" class="massEditTotal"> </th>'
+' <th width="47" style="" class="massEditClosed"> </th>'
+' <th width="72" style="" class="massEditShippedVia"> </th> '
+' <th width="41" style="" class="massEditNotes"> </th></tr>';
if ($('#massEditTR').length){
} else {
$(".ui-search-toolbar").after(t2);
// $(".ui-jqgrid-hdiv:first").after(t1);
}
});
//]]>
</script>
</head>
<body>
<div id="outerDiv" style="margin:5px;">
<table id="list"></table>
<div id="pager"></div>
</div>
</body>
</html>
关于c# - 如何在asp.net中的jqgrid中的每一行添加一个按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40888199/
25
4
0
我试图对 ASP.Net MVC 有一个高层次的理解，我开始意识到它看起来很像原始的 ASP 脚本。过去，我们将“模型”/业务逻辑代码组织到 VBScript 类或 VB COM 组件中。 当然，现在
我已经搜索了一段时间，但似乎找不到答案。 我想在我的旋转木马中显示一个计数器，左边是当前项目(工作)，左边是项目总数。 我的代码:
. 最佳答案 Scott Gu 称这些为代码块。这就是我的看法。 http://weblogs.asp.net/scottgu/archive/2010/04/06/new-lt-gt-syntax
我有一个使用 Visual Studio 2010/.net 4/VB 制作的网站。 我真的很喜欢我发现的 FAQ 系统的布局，因为它很简单，但它是经典的 asp。所以，显然，我不能包括我的母版页布局
好吧，对于你们许多人来说，这个问题可能有一个非常明显的答案，但它让我难住了。 我有一个 asp.net Web 表单，上面有两个控件(嗯，不止这两个，但我们将重点关注这些) - 第一个是 asp:dr
当我将 ASP.NET 复选框控件设置为 asp.net 更新面板的异步回发触发器时，EventName 属性是什么？ 最佳答案 我相信它是 CheckedChanged。 关于asp.net - a
我有一个用经典 asp 编写的(巨大的)网站。现在我必须切换到 vb.net (razor)。有没有办法将这两个结合起来直到切换完成？ 有没有办法让应用程序与经典的 asp 和 vb.net 一起工作
I am creating a products page, where the user selects an option in a radiobuttonlist for example, an
我最近将一个经典的 ASP 应用程序转换为 ASP.NET 3.5，但我觉得我的经典 ASP 版本要快一些(我不知道可能买家会后悔)。 所以你们能帮我解决这个问题吗，让我知道哪个更快，asp、asp.
从本周开始，我被要求开始学习如何使用 ASP 开发网站。我通过 XNA 对 C# 有一定的经验，所以这部分对我来说并不是什么麻烦。 我一直在关注Music Store Tutorial这需要我设置一个
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
我想将一些表单变量发布到经典 ASP 页面中。我不想改变经典的 ASP 页面，因为需要完成大量的工作，以及消耗它们的页面数量。 经典的 ASP 页面需要将表单变量 Username 和 Userpas
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
在某种程度上，这可能是一个异端问题。我们有一个大型站点，其中许多页面仍在ASP中。通常，并没有真正动态的，而是包括(通过SSI或Server.Execute)定期重新生成的HTML块。看起来好像是一个
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 9 年前。 Improve this ques
我有一个遗留的 ASP 应用程序——在不久的某个时候——需要迁移到 ASP.Net 2.0(以与也在 2.0 中的其他应用程序兼容)。 对于这类事情是否有最佳实践，即作为第一步将当前 html、vbs
我目前在一家公司工作，该公司使用 ASP.NET Webforms 和旧 ASP 页面的组合进行 Web 开发。这对于他们当前的项目来说效果很好，但我想说服/建议他们切换到 ASP.NET MVC，因
我有一个经典的 asp 应用程序。我想将该页面的竞赛表格发布到 Asp.Net 表格。原因是我想在进入数据库之前使用我在 Asp.Net 页面中内置的大量逻辑进行验证，而我对 asp 不太了解。更不用
我知道在 ASP.NET MVC 中，您可以拥有移动 View 并执行类似 Index.mobile.cshtml 的操作。和 _Layout.mobile.cshtml并且服务器知道将这些 View
我需要从一些服务器端 c#.net 代码中调用经典 asp 页面上的 VBscript 函数 - 有谁知道一种干净的方法来做到这一点？在 .net 中重写函数不是一种选择。 我会再解释一下这个问题..
我是一名优秀的程序员,十分优秀！