Я создал JqGrid с моими пользовательскими данными и с помощью форматировщиков.JQGrid Dynamic Row Editable
где, если я нажимаю на какой-либо текст (например: «D»), я должен изменить текст другим текстом (например: «R»). а также цвета фона.
сценарий как это:
- пользователь нажимает A, изменения клеток в виде C щелкает
- пользователя по D, изменения клеток к R
- пользователь нажимает на R, клеточные изменения к D
- пользователь нажимает на C, изменения клетки к A
JS КОД:
function SalesOptimizationGridData() {
var mydata =[ { size: "S1", op: "170", OPStatus: "X", s1: "-170", S1Status: "C", s2: "170", S2Status: "D", s3: "170", S3Status: "A", s4: "170", S4Status: "C", s5: "170", S5Status: "C" },
{ size: "S2", op: "-170", OPStatus: "D", s1: "-170", S1Status: "C", s2: "-170", S2Status: "X", s3: "-170", S3Status: "D", s4: "-170", S4Status: "C", s5: "-170", S5Status: "D" },
{ size: "S3", op: "370", OPStatus: "X", s1: "370", S1Status: "C", s2: "-370", S2Status: "A", s3: "-370", S3Status: "C", s4: "370", S4Status: "C", s5: "-370", S5Status: "A" },
{ size: "S4", op: "-270", OPStatus: "D", s1: "-170", S1Status: "D", s2: "-170", S2Status: "R", s3: "170", S3Status: "C", s4: "170", S4Status: "A", s5: "170", S5Status: "R" },
{ size: "S5", op: "-340", OPStatus: "X", s1: "170", S1Status: "R", s2: "270", S2Status: "A", s3: "-170", S3Status: "D", s4: "340", S4Status: "D", s5: "-170", S5Status: "A" },
{ size: "S6", op: "-140", OPStatus: "A", s1: "-270", S1Status: "R", s2: "170", S2Status: "A", s3: "170", S3Status: "C", s4: "170", S4Status: "R", s5: "170", S5Status: "C" },
{ size: "S7", op: "-140", OPStatus: "C", s1: "-170", S1Status: "D", s2: "170", S2Status: "D", s3: "-170", S3Status: "R", s4: "240", S4Status: "X", s5: "170", S5Status: "C" },
{ size: "S8", op: "0", OPStatus: "X", s1: "-0", S1Status: " ", s2: "0", S2Status: "D", s3: "0", s4: "0", S3Status: "C", S4Status: "A", s5: "0", S5Status: "X" },
{ size: "S9", op: "170", OPStatus: "R", s1: "170", S1Status: "X", s2: "170", S2Status: "D", s3: "170", S3Status: "A", S4Status: "C", s4: "170", s5: "-170", S5Status: "D" },
];
return mydata;
}
function AssortmentDetailsGrid() {
$("#ao-salesoptimization-grid").jqGrid({
data: SalesOptimizationGridData(),
datatype: "local",
autowidth: false,
//shrinkToFit: true,
rowNum: 15,
rowList: [15, 30, 45],
colNames: ['SIZE', 'OP', 'S1', 'S2', 'S3', 'S4', 'S5'],
colModel: [
{
name: 'size', index: 'id', sortable: true, sorttype: 'int', resizable: true},
{ name: 'op', index: 'op', sortable: true, sorttype: 'int', resizable: true, formatter: opformatter },
{ name: 's1', index: 's1', sortable: true, sorttype: 'int', resizable: true, formatter: s1formatter },
{ name: 's2', index: 's2', sortable: true, sorttype: 'string', resizable: true, formatter: s2formatter },
{ name: 's3', index: 's3', sortable: true, sorttype: 'string', resizable: true, formatter: s3formatter },
{ name: 's4', index: 's4', sortable: true, sorttype: 'int', resizable: true, formatter: s4formatter },
{ name: 's5', index: 's5', formatter: s5formatter }
],
sortname: 'id',
sortorder: 'desc',
loadOnce: true,
gridview: true,
loadComplete: function() {
if ($("#ao-salesoptimization-grid-container").width() !== 0)
$('#ao-assortmentdetails-grid').setGridWidth($("#ao-salesoptimization-grid-container").width());
InitjQueryScroll();
$("#gview_ao-salesoptimization-grid").find('.ui-jqgrid-bdiv').mCustomScrollbar({ theme: "rounded" });
if ($(".ao-op-grid-formatter:first-child > p").text() === "D") {
$(".ao-op-grid-formatter").addClass("statusD");
}
}
});
function opformatter(cellvalue, options, rowObject) {
return '<div class="ao-op-grid-formatter"><p>' + rowObject.OPStatus + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
//return cellvalue;
}
function s1formatter(cellvalue, options, rowObject) {
return '<div class="ao-op-grid-formatter"><p>' + rowObject.S1Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
//return cellvalue;
}
function s2formatter(cellvalue, options, rowObject) {
return '<div class="ao-op-grid-formatter"><p>' + rowObject.S2Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
//return cellvalue;
}
function s3formatter(cellvalue, options, rowObject) {
return '<div class="ao-op-grid-formatter"><p>' + rowObject.S3Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
//return cellvalue;
}
function s4formatter(cellvalue, options, rowObject) {
return '<div class="ao-op-grid-formatter"><p>' + rowObject.S4Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
//return cellvalue;
}
function s5formatter(cellvalue, options, rowObject) {
return '<div class="ao-op-grid-formatter"><p>' + rowObject.S5Status + '</p></div>' + ' ' + '<div class="ao-grid-formatter">' + cellvalue + '</div>';
//return cellvalue;
}
}
Рабочая JSFIDDLE является here
Kindy мне помочь, если у вас есть какие-либо идеи !! заранее спасибо!
удивительным !! спасибо за ваше время и помощь :) – Sarav
@IamSarav: Добро пожаловать! – Oleg
@IamSarav: Еще одно замечание. Я вижу, что вы являетесь участником stackoverflow с 22 месяцев и используете голосование только 4 раза. Голосование является одним из самых важных на стековом потоке. Google и другие поисковые системы используют подсчет голосов для сортировки результатов поиска. Чем больше пользователей голосует вопрос/ответ, тем проще будет найти его. Вы имеете право голосовать ** 30 ответов и вопросов в день **. Пожалуйста, используйте его * любую полезную информацию *, которую вы найдете в stackoverflow (не только ответы на ваши вопросы). Вы помогаете другим людям общаться на этом пути. – Oleg