常見問答

如何在Javascript中修改JQGridColumn的Caption?
$('#DatagridID').datagrid('getColumnOption',columnName).title=titleName;
如何在datagrid,toolitems中撰寫下載檔案指令?
var
a;

a = window.open("../test/tst/list.rar", "_blank",
"width=0, height=0,status=0");

a.document.execCommand("SaveAs");

open方法是開啟這個文件，如果是圖片或者txt等瀏覽器支援的文件格式，就會直接開啟，如果是不支援的比如rar文件，就會提示下載。
如何動態隱藏DataGrid某一欄位?
$("#dataGridMaster").datagrid('showColumn',
'CustomerID'); //顯示欄位

$("#dataGridMaster").datagrid('hideColumn', 'CustomerID'); //隱藏欄位

如何將DataGrid明細欄位加總累計到主檔DataForm的欄位來呢?

$(document).ready(function () {

            $("#dataGridDetail").datagrid({

                onAfterEdit: function (rowIndex, rowData, changes) {

                 rowData.Amount = rowData.UnitPrice * rowData.Quantity;

                    $(this).datagrid('refreshRow', rowIndex);

                }})});

//加總至Master欄位。DataGridDetail Amount欄位Total屬性設定sum、OnTotal屬性定義此方法

function mytotal(rowData) {

            $('#dataFormMasterTotalAmt').val(rowData.Amount);

//DataFormMaster的OnApply屬性定義此方法

function formApply() {

            endEdit($('#dataGridDetail'));

如何取dataGridView的欄位值?

var datagrid = $('#JQDataGrid1')
 
var editIndex = getEditIndex(datagrid);
 
var editor = datagrid.datagrid('getEditor', { index: editIndex, field: 'LastOrdDate' }); //取LastOrdDate欄位
 
var valto = editor.actions.getValue(editor.target); //取值
 
editor.actions.setValue(editor.target, 某值);//給值

如何在JQDataGrid 插入一個 Button，並且可以 Click 呼叫 Js function?

[1]在 InfoCommon 的 SQL 增加一個虛擬欄位

ex: Select '' AS ckBox From Customers

[2] 在JQDataGrid最前面加入ckBox虛擬欄位並在formatscript屬性設定一個Javascript 的函式名稱，ex: ckBoxFormater

[3] 實作 Javascript 函式

function ckBoxFormater(value,row,index)

return '<input type="button" value="'+ value +'" onclick="myClick()"/>';

export 匯出Excel時，如何讓 JQDataGrid 上的隱藏欄位不要匯出？

1. 在JQWebClient\js\jquery.infolight.js文件中查找exportGrid方法。
 
2. 在方法的：
 
var option = $(dgid).datagrid('getColumnOption', field);
 
程式下，增加一個if程式：
 
if (!option.hidden) {
 
3. 這個if一直到：
 
columns.push(column);
 
下，整個包起來。

JQDataGrid上Combox連動如何撰寫?

1.combobox連動：
 
在第一個combo的OnSelect上定義方法
 
function filterCity() {
 
var val = $(this).combobox("getValue");
 
var row = $('#dataGridMaster').datagrid('getSelected');
 
var rowIndex = $('#dataGridMaster').datagrid('getRowIndex', row);
 
var editor = $('#dataGridMaster').datagrid('getEditor', { index: rowIndex, field: 'ShipCity' });
 
var combo = editor.target;
 
combo.combobox('setWhere', "CountryID = '" + val + "'");
 
}
 
//上面有元件、欄位名稱請自行替換為自己的。
 
2.combobox過濾：
 
OnBeforeLoad屬性上定義方法
 
function comboBeforeLoad(param) { 
 
var queryWord = new Object();
 
queryWord.whereString = "where 條件";
 
param.queryWord = $.toJSONString(queryWord);
 
}

要如何抓到DataGridView所有rows的值呢?
var rows = $('#dataGridMaster').datagrid('getRows');取回當前頁的所有資料。

請問該如何在javascript中改變datagrid的AllowAdd屬性?

[1]如果能在 .cs 判斷條件的話，在 Page_Load() 事件加入

JQDataGrid1.AllowAdd = false; //不允許新增

[2]若在前端才能判斷，就還是透過 Javascript code

$('#toolItemdataGridView新增').hide() 將新增按鈕隱藏

跟 OnBeforeInsert() 、OnInsert() 事件來控制

如何隱藏datagrid?
datagrid不能直接隱藏，可以在外面放一個div，對div執行hide

如何將陣列資料逐筆插入datagrid?

var row = new Object();
 
row['fieldname'] = strarray[i];
 
......
 
$('#dataGridDetail').datagrid('appendRow', row);

datagrid如何實現一次多筆刪除功能?

自行增加一個刪除鈕，裡面寫JS程式，比如：

var rows = $("#dataGridDetail").datagrid('getChecked');

for (var i = rows.length - 1 ; i >= 0 ; i--) {

var index = $('#dataGridDetail').datagrid('getRowIndex', rows[i]);

$('#dataGridDetail').datagrid('deleteRow', index);

apply($('#dataGridMaster'));

DataGrid字數較長無法全部看到,有欄位自動換列功能嗎?
//dataGrid的Column的formatScript屬性，定義一個自定義方法，比如wrapText。然後在aspx中定義該方法，如下：

function wrapText(value) {

return "<p style='margin:0px;word-wrap:break-word;white-space:
normal'>" + value + "</p>";

}
datagrid js取得欄位代號及名稱的方法
var datagrid = $('#dataGridMaster');

var rowIndex =
$("#dataGridMaster").datagrid("getRowIndex",
$("#dataGridMaster").datagrid("getSelected"));

var field = 'CustomerID';

var row = datagrid.datagrid('getPanel').find('.datagrid-view1
.datagrid-body').find('tr[datagrid-row-index="' + rowIndex + '"]');

var value = row.find('td[field="' + field +
'"]>.datagrid-cell').html();

alert(value);
如何直接改datagrid的值?
$(dialoggrid).datagrid('beginEdit',
index);

var editor =
$(dialoggrid).datagrid('getEditor', { index: index, field: field });

if (editor) {

editor.actions.setValue(editor.target,
row[field]);

}

$(dialoggrid).datagrid('endEdit',
index);
如何清除 Detail的資料?
var rows =
$("#dataGridDetail").datagrid('getRows');

var cnt = rows.length;

for (var i = cnt - 1 ; i >= 0 ;
i--) {

$('#dataGridDetail').datagrid('deleteRow',
0);

}

datagrid可以動態的disable和enable欄位嗎?

dataGrid無法通過js來控制readonly，如果是要控制輸入項，您可以參考：
 
//修改時，欄位不可編輯。寫在DataGrid onUpdate事件

function UpdateTest() {

            var row = $(dgid).datagrid('getSelected');

            var index = $(dgid).datagrid('getRowIndex', row);

            var editIndex = undefined;

            if (editIndex != index) {

                    $(dgid).datagrid('selectRow', index).datagrid('beginEdit', index);

                    var cellEdit = $(dgid).datagrid('getEditor', { index: index, field: 'FieldName' });

                       $(cellEdit.target).attr("disabled", "disabled"); //text

                       //$(cellEdit.target).combobox('disable'); //combobox

                       //$(cellEdit.target).datebox({ disabled: true }); //datebox

                       //$(cellEdit.target).refval('disable'); //refval

//新增時，欄位不可編輯。在DataGrid toolItem新增一個按鈕

function InsertTest() {

            var index = $(dgid).datagrid('getRows').length;

            insertItem(dgid, "$(this)"); //--新增空白一筆記錄

            var editIndex = undefined;

            if (editIndex != index) {

                $(dgid).datagrid('selectRow', index).datagrid('beginEdit', index);

                var cellEdit = $(dgid).datagrid('getEditor', { index: index, field: 'FieldName' });;

                $(cellEdit.target).attr("disabled", "disabled"); //text

                //$(cellEdit.target).combobox('disable'); //combobox

                //$(cellEdit.target).datebox({ disabled: true }); //datebox

                //$(cellEdit.target).refval('disable'); //refval

dataGrid 可否依資料內某欄位條件不同改變整行背景顏色?
$('#dataGridMaster').datagrid({

//設定datagrid的row的背景色

rowStyler: function (index, row) {

if (row.FieldName ==
"value") {

return
'background-color:#6293BB;color:#fff;';

}

else {

return
'background-color:red;color:black;';

}}

});

color是字體顏色，如果不需要設定，可以不設。
若想在Grid上的toolitem那欄的按鈕，當游標停在那個按鈕上時出現提示?
網頁增加如下程式中script中。

$(document).ready(function () {

$('#toolItemdataGridMaster查詢').attr('title','我的查詢');

$('#toolItemdataGridMaster查詢').find('.l-btn-text').mouseover(function()

{

$(this).addClass('overtext');

});

$('#toolItemdataGridMaster查詢').find('.l-btn-text').mouseout(function()

{ $(this).removeClass('overtext');

});

})

其中：

“toolItemdataGridMaster查詢”是我的button的id，可以瀏覽網頁，檢查元件查找元件的id，並替換到上述程式中。

另外，需要增加一部分內容到style項中：

<style>

.overtext

{

color: #00ff00;

}

</style>

顏色請自行調整。
grid是否可以調整列高?
可以用一個變通的方法，隨便找一個text欄位，定義formatscript，定義一個js方法，方法的程式：

return "<p
style='margin:0px;word-wrap:break-word;white-space: normal;
height:50px'>" + value + "</p>";
datagrid 加總欄位的加總值如何取？
可以在欄位的onTotal定義一個js方法，系統會帶參數，比如：function Mytotal(footerRow) {footerRow.Quantity就是對Quantity欄位匯總的值}
如何讓DataGrid第一行不要預設為選中的狀態?
在DataGrid的OnLoadSuccess事件裡撰寫$("#dataGridView").datagrid("clearSelections");
要如何取得dataGrid目前selectedrow 的 dataForm目前狀態?
dataForm的onloadsuccess的事件，寫程式：getEditMode($('#dataFormMaster'))是取得狀態，3個狀態值：updated,inserted,viewed
如何新增DataGrid上refval元件OnBlur事件
function beginEdit(dg, index)
{
dg.datagrid('selectRow', index).datagrid('beginEdit', index);
setEditIndex(dg, index);
dg.datagrid('changeState', 'editing');

var ed = dg.datagrid('getEditor', { index: index, field: 'CompanyName' });
$(ed.target, "#dataGridMaster").next().find('.refval-text').click(function () {
$(ed.target, "#dataGridMaster").next().find('.refval-text').bind('blur', function () {
alert('test');
});
})
};
//直接放在<script>下就可以，需自行替換FieldName和DataGrid的名字
DataGrid載入時動態給予分頁筆數
//在OnLoadSuccess事件
var first = true;
function dataGridOnLoadSuccess() {
if (first) {
$('#dataGridView').datagrid({
pageSize: 25,
pageList: [15, 20, 25],
});
first = false;
}
}
GRID雙數欄位底色變斑馬效果
<style>

        .datagrid-btable:nth-child(even){

            background-color:azure;

        }

    </style>
Grid選中一個欄位帶值到另一個欄位的程式範例
範例說明, 產品欄位選中的產品的單價帶到單價欄位.
產品用InfoRefVal元件,要設定:
onSelect:dataGridDetailProductIdOnSelect
selectOnly:true

function dataGridDetailProductIdOnSelect(selectedRow) {
var unitPrice = selectedRow.UnitPrice;
var editingRowIndex = $('#dataGridDetail').datagrid('getRowIndex', $('#dataGridDetail').datagrid('getSelected'));
var editor = $('#dataGridDetail').datagrid('getEditor', { index: editingRowIndex, field: 'UnitPrice' });
$(editor.target).val(unitPrice);
}