/
/
/
/
فیلد طراحی شده در سطح فرم با نگهدارنده و فیلد های عددی و انتخابی
**سپس باید در قسمت Element Custom تنظظیمات عمومی باید کلاس تعریف کنید :**
```js
{"class":"myPlaque"}
```
**و پس از آن باید طراحی پلاک را با CSS انجام داد :**
```css
/* این کلاس از طریق فرمساز به کانتینر نگهدارنده پلاک اضاف میشود */
/* از طریق فرمساز، نمایش دکمه خالی کردن فیلد از فیلدها پنهان شد */
.myPlaque{
/* دادن بک گراند عکس به کانتینر */
background-image: url(/Files/Temp/carPlate1003.png);
background-size: cover;
background-repeat: no-repeat;
/* تنظیم کردن عکس داخل کانتینر */
padding-left: 40px;
padding-right: 15px;
/* به علت اینکه فیلدهای درون کانتینر دارای پوزیشن ابسولوت میباشند، نیاز است که پوزیشن کانتینر رلتیو باشد */
position: relative;
}
/* کوچک کردن سایز فلش کنار سلکتیو */
.myPlaque .letter .dx-button-normal{
width: 20px;
}
/* به علت نیاز به تنظیم دقیق موقعیت فیلدهای پلاک نسبت به کانتینر پلاک، نیاز است که فیلد ها دارای پوزیشن ابسولوت باشند */
.myPlaque .row .col{
position: absolute;
}
.myPlaque .twoDigit input,
.myPlaque .threeDigit input,
.myPlaque .iran input{
font-size: 20px;
}
/*پنهان سازی لیبل فیلدها در کانتینر*/
.myPlaque .x-field-label{
display: none;
}
/* تمام مواردی که بر اساس سایز تغییر میکنند با مدیا کوئری اعمال میگردند */
/* در این مثال 5 سایز زیر مدیا کوئری زده شده که بر اساس سایت بوت استزپ میباشد */
/* Extra small < 576px خیلی کوچک */
/* Small ≥576px کوچک */
/* Medium ≥768px متوسط */
/* Large ≥992px بزرگ */
/* Extra large ≥1200px خیلی بزرگ */
/*در این مثال سایزهای خیلی کوچک ، کوچک، متوسط و بزرگ دارای مقایر یکسان هستند
و سایز خیلی بزرگ کمی پلاک و عناصر داخل آن بزرگتر میباشند */
@media only screen and (max-width: 575.99px) {
.myPlaque{
width: 300px;
height: 66px;
}
.myPlaque .row .col{
top: 20px;
}
.myPlaque .dx-texteditor:not(.dx-textarea):not(.dx-tagbox){
height: 40px !important;
}
.myPlaque .row .col:nth-child(1){/*iran*/
width: 70px;
left: 228px;
}
.myPlaque .row .col:nth-child(2){/*threeDigit*/
width: 80px;
left: 155px;
}
.myPlaque .row .col:nth-child(3){/*letter*/
width: 80px;
left: 85px;
}
.myPlaque .row .col:nth-child(4){/*twoDigit*/
width: 70px;
left: 25px;
}
}
@media only screen and (min-width: 576px) {
.myPlaque{
width: 300px;
height: 66px;
}
.myPlaque .row .col{
top: 20px;
}
.myPlaque .dx-texteditor:not(.dx-textarea):not(.dx-tagbox){
height: 40px !important;
}
.myPlaque .row .col:nth-child(1){/*iran*/
width: 70px;
left: 228px;
}
.myPlaque .row .col:nth-child(2){/*threeDigit*/
width: 80px;
left: 155px;
}
.myPlaque .row .col:nth-child(3){/*letter*/
width: 80px;
left: 85px;
}
.myPlaque .row .col:nth-child(4){/*twoDigit*/
width: 70px;
left: 25px;
}
}
@media only screen and (min-width: 768px) {
.myPlaque{
width: 300px;
height: 66px;
}
.myPlaque .row .col{
top: 20px;
}
.myPlaque .dx-texteditor:not(.dx-textarea):not(.dx-tagbox){
height: 40px !important;
}
.myPlaque .row .col:nth-child(1){/*iran*/
width: 70px;
left: 228px;
}
.myPlaque .row .col:nth-child(2){/*threeDigit*/
width: 80px;
left: 155px;
}
.myPlaque .row .col:nth-child(3){/*letter*/
width: 80px;
left: 85px;
}
.myPlaque .row .col:nth-child(4){/*twoDigit*/
width: 70px;
left: 25px;
}
}
@media only screen and (min-width: 992px) {
.myPlaque{
width: 300px;
height: 66px;
}
.myPlaque .row .col{
top: 20px;
}
.myPlaque .dx-texteditor:not(.dx-textarea):not(.dx-tagbox){
height: 40px !important;
}
.myPlaque .row .col:nth-child(1){/*iran*/
width: 70px;
left: 228px;
}
.myPlaque .row .col:nth-child(2){/*threeDigit*/
width: 80px;
left: 155px;
}
.myPlaque .row .col:nth-child(3){/*letter*/
width: 80px;
left: 85px;
}
.myPlaque .row .col:nth-child(4){/*twoDigit*/
width: 70px;
left: 25px;
}
}
@media only screen and (min-width: 1200px) {
.myPlaque{
width: 360px;
height: 80px;
}
.myPlaque .row .col{
top: 22px;
}
.myPlaque .dx-texteditor:not(.dx-textarea):not(.dx-tagbox){
height: 50px !important;
}
.myPlaque .row .col:nth-child(1){/*iran*/
width: 70px;
left: 282px;
}
.myPlaque .row .col:nth-child(2){/*threeDigit*/
width: 80px;
left: 187px;
}
.myPlaque .row .col:nth-child(3){/*letter*/
width: 80px;
left: 100px;
}
.myPlaque .row .col:nth-child(4){/*twoDigit*/
width: 70px;
left: 30px;
}
}
```
**خروجی طراحی شده برای کاربر نهایی :**
```js
function addRecordToSubform(viewModel, records, subFormName, subFormParent = '') {
let dataList;
if (subFormParent && subFormParent != '') {
dataList = viewModel[`${subFormParent}${FormBuilderStatics.Record}`]()[subFormName];
} else {
dataList = viewModel[`${subFormName}${FormBuilderStatics.SubList}`];
}
if (ko.isObservable(dataList) && !dataList()) dataList([]);
let lastID = ko.mapping.toJS(dataList).map(i => i.Id).reduce((a, b) => b > a ? b : a, 0);
let defaultRecord = ko.mapping.toJS(viewModel[`${subFormName}${FormBuilderStatics.Record}`]);
if (!Array.isArray(records)) records = [records];
records.forEach(record => {
if (!('gb_state' in record)) record.gb_state = RecordStateType.new;
if (!('Id' in record)) record.Id = ++lastID;
Object.keys(defaultRecord).forEach(key => {
if (!(key in record)) record[key] = defaultRecord[key];
});
dataList.push(ko.mapping.fromJS(record));
});
if (subFormParent && subFormParent != '') {
viewModel[`${subFormName}${FormBuilderStatics.SubList}`](viewModel[`${subFormParent}${FormBuilderStatics.Record}`]()[subFormName]());
}
}
export const onLoad = function (viewModel) {
// تنظیم دستی رکورد های پیش فرض
addRecordToSubform(
viewModel,// viewModel به طور مستقیم پاس داده شود
[
{
"FieldName1":Value1,
"FieldName2":Value2,
...
},
{
"FieldName1":Value1,
"FieldName2":Value2,
...
},
{
"FieldName1":Value1,
"FieldName2":Value2,
...
},
],
YOUR_OWN_SUBFORM_NAME , // نام فیلد تو درتو درون تک کوتیشن قرار میگیرد
// به طور مثال 'SubName'
YOUR_OWN_SUBFORM_PARENT_NAME //(optional)
// در صورتی که فیلد تو در تو مطعلق به فیلد تو در تو دیگر باشد نام فیلد تو در تو پدر درون تک کوتیشن قرار میگیرد
// به طور مثال 'ParentSubName'
);
//==============================================
// تنظیم رکورد های پیش فرض با استفاده از provider
// در صورتی که بخواهیم داده های پیش فرض تو در تو را از مبع دیگر دریافت کنیم می توانیم از طریق ذیل اقدام کنیم
const ProviderId = 0;
const Parameters = [{}]
absoluteMethodHelper.runProvider(ProviderId,Parameters).done(response => {
if (!response.HasError) {
const records = JSON.parse(response.Content.providerResult);
addRecordToSubform(
viewModel,// viewModel به طور مستقیم پاس داده شود
records,
YOUR_OWN_SUBFORM_NAME , // نام فیلد تو درتو درون تک کوتیشن قرار میگیرد
// به طور مثال 'SubName'
YOUR_OWN_SUBFORM_PARENT_NAME //(optional)
// در صورتی که فیلد تو در تو مطعلق به فیلد تو در تو دیگر باشد نام فیلد تو در تو پدر درون تک کوتیشن قرار میگیرد
// به طور مثال 'ParentSubName'
);
}
});
}
```
```js
function makeSelectBoxAddable(viewModel, { name, parent = null, formTemplate, formVM, displayMode = 'popup', store }) {
let fieldInstance;
if(parent) {
fieldInstance = viewModel.fields[parent][name + FormBuilderStatics.Instance];
} else {
fieldInstance = viewModel.fields[name + FormBuilderStatics.Instance];
}
let form, popup, htmlBlock;
function buildForm() {
form = $(`<form class="${displayMode === 'popup' ? 'p-5' :''}">${formTemplate}</form>`);
ko.applyBindings(formVM, form.get(0));
return form;
}
function buildSubmitButton() {
return $('<div></div>').dxButton({
type: 'success',
text: 'اضافه کردن',
icon: 'add',
onClick: async function() {
loadPanel.indicatorShow();
const formData = form.serializeArray().reduce((saver, item) => {
saver[item.name] = item.value;
return saver;
}, {});
if(typeof store === 'function') {
const storeResult = store(formData);
if(storeResult instanceof Promise) {
await storeResult;
}
await fieldInstance.getDataSource().reload().promise();
}
closeForm();
loadPanel.indicatorHide();
},
});
}
function getAddItemTitle() {
return `افزودن آیتم جدید (${fieldInstance.element().closest('.col').find('.x-field-label').text()})`;
}
function buildCloseButton() {
return $('<div></div>').dxButton({
type: 'default',
text: 'بستن',
icon: 'remove',
onClick: closeForm
});
}
function closeForm() {
if(displayMode === 'popup') {
popup.dispose();
} else {
htmlBlock.remove();
}
}
function openForm() {
if(displayMode === 'popup') {
const modalID = `newRecordModal_${name}_${parent}`;
const popupWrapper = $(`<div id="${modalID}"></div>`);
$('body').append(popupWrapper);
popup = popupWrapper.dxPopup({
showCloseButton: true,
hideOnOutsideClick: false,
rtlEnabled: pageDir('rtl'),
width: '70%',
height: '80%',
title: getAddItemTitle(),
visible: true,
animation: {
hide: { type: 'pop', duration: 300, from: { opacity: 1, scale: 1 }, to: { opacity: 0, scale: 0.55 } },
show: { type: 'pop', duration: 300, from: { scale: 0.55 } },
},
contentTemplate: function () {
const template = $(`
<div class="modalContainer"> <div class="modal-body rtl p-0"> <div class="scrollview"></div> </div> <div class="modal-footer"> <div class="form-submit"></div> </div>
`);
template.find('.scrollview')
.append(buildForm())
.dxScrollView({
height: '100%'
});
template.find('.modal-footer').append(buildSubmitButton());
return template;
},
onShowing: function () {},
onHidden: function () {}
}).dxPopup('instance');
} else {
htmlBlock = $(`
<div class="col s12"> <div class="card"> <div class="card-header d-flex align-items-center"> ${getAddItemTitle()} </div> <div class="card-body"></div> </div> </div> `);
buildForm();
htmlBlock.find('.card-body').append(form);
htmlBlock.find('.card-header')
.append('<div class="flex-1"></div>')
.append(buildSubmitButton())
.append(' ')
.append(buildCloseButton());
fieldInstance.element().closest('.row').append(htmlBlock);
}
}
fieldInstance.option('buttons', [
{
location: 'after',
name: `openpopup_${name}_${parent}`,
options: {
stylingMode: 'filled',
icon: 'chevrondown',
type: 'normal',
onClick() {
fieldInstance.open();
},
},
},
{
location: 'after',
name: `addsubform_${name}_${parent}`,
options: {
stylingMode: 'outlined',
icon: 'add',
type: 'default',
onClick: openForm,
},
},
]);
}
export const onLoad = function (viewModel) {
makeSelectBoxAddable(viewModel, {
name: 'YOUR_OWN_SELECTIVE_FIELD_NAME',
parent: 'YOUR_OWN_FIELD_PARENT_NAME',// optional
displayMode: 'inline',// inline | popup
formTemplate: `<div data-bind="dxTextBox: textBoxConfig"></div>`,
formVM: new function() {
this.textBoxConfig = {
name: 'title',
placeholder: 'متن را وارد کنید'
};
},
store: function(formData) {// on store form
/*
تمامی داده های فرم بصورت آبجکت داخل متغیر فرم دیتا قرار میگیرند
*/
return absoluteMethodHelper.runProvider(
YOUR_OWN_PROVIDER_ID,
[
{ name: "Title", value: formData.title },
// ...
]
).promise();
/*
توجه: این فانکشن حتما باید خروجی
Promise
داشته باشد
*/
}
});
}
```
پس از اعمال کد زیر علامت افزوردن آیتم به فیلد اضافه می شود
با کلیک بر روی دکمه افزودن آیتم پنجره جدیدی باز می شود که می توانید ایتم جدید را در آن وارد کنید
فراخوانی از پایگاه داده و نمایش به صورت data grid :
```js
absoluteMethodHelper.runProvider(ProviderId, Parameters).then((res) => {
// بصورت یک جیسون رشته ای میباشد که می بایست آن را پس از دریافت به جیسون تبدیل کرد res مقدار متغیر
const receive = JSON.parse(res.Content.providerResult)[0];
absoluteMethodHelper.runProvider(23, [
{ name: "Empno", value: receive.AgentID },
{ name: "Datef", value: Fdate.format("YYYY-MM-DD") },
{ name: "DateT", value: TDate.format("YYYY-MM-DD") }
]).then((res) => {
if (res.HasError === false) {
$('.table').dxDataGrid({
rtlEnabled: true,
dataSource: JSON.parse(res.Content.providerResult),
onInitialized: function () {
loadPanel.indicatorHide();
}
});
}
}).catch(() => loadPanel.indicatorHide());
}).catch(() => loadPanel.indicatorHide());
```
**فعال سازی قابلیت کلیک راست و درج ساعت های نمایش داده شده در فیلد :**
همانطور که در تصویر بالا مشاهده می کنید پس از کلیک راست بر روی زمان های نمایش داده شده می توانید آن ها را برای فیلد های از ساعت و یا تا ساعت انتخاب کنید
```js
absoluteMethodHelper.runProvider(134, [
{ name: "empno", value: AgentID },
{ name: "datef", value: Fdate.format("YYYY-MM-DD") },
{ name: "DateT", value: TDate.format("YYYY-MM-DD") }
]).then((res) => {
let addOperationColumn = true;
if (res.HasError === false) {
try {
$('.table').dxDataGrid({
rtlEnabled: true,
columnAutoWidth: true,
dataSource: JSON.parse(res.Content.providerResult),
onInitialized: function () {
loadPanel.indicatorHide();
},
commonColumnSettings: {
encodeHtml: false,
},
onCellPrepared: (event) => {
if (['M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'M9', 'M10'].includes(event.column.caption) && event.data) {
const value = event.value;
debugger;
if (!(typeof value === 'string' && value.search('-') === -1)) return;
const ctxmenu = $('');
ctxmenu.dxContextMenu({
target: event.cellElement,
rtlEnabled: true,
dataSource: [
{ id: 'from', text: 'استفاده برای "از ساعت"' },
{ id: 'to', text: 'استفاده برای "تا ساعت"' }
],
onItemClick(e) {
switch (e.itemData.id) {
case 'from':
viewModel.data().FromTimeLeaveOrMission(value);
break;
case 'to':
viewModel.data().UntilTimeLeaveOrMission(value);
break;
}
toast.show('success', Messages.operationSucceded);
}
});
event.cellElement.append(ctxmenu);
}
}
});
loadPanel.indicatorHide();
} catch (e) {
loadPanel.indicatorHide();
}
}
}).catch(() => loadPanel.indicatorHide());
```
-----
قرار دادن فیلد های تاریخ در فرم با استفاده از Custom js :
```js
$("#from-date").gbDatePicker({
onInput: function (event) {
Fdate = event;
},
inputType: "jalali",
closePopupOnSelect: true,
rtlEnabled: true,
});
```
با استقاده از کامپوننت های موجود می توان تغییرات را بر روی این فیلد اعمال کرد به عنوان مثال rtlEnabled
**محاسبه اختلاف دو تاریخ :**
با استفاده از یک تابع اختلاف دو تاریخ را محسابه می کنیم و در صورتی که تاریخ وارد شده اول بزرگ تر از تاریخ وارد شده دومی باشد پیغام خطا می دهد
سپس در تابع دوم اختلاف تاریخ را نمایش می دهیم
```js
function calculateDateDiff() {
const from = moment(FromDateLeaveOrMission(), "jYYYY/jMM/jDD");
const to = moment(UntilDateLeaveOrMission(), "jYYYY/jMM/jDD");
if (from.unix() > to.unix()) {
return -1; // invalid dates;
}
return to.diff(from, "days") + 1;
}
function showDateDiff() {
if (FromDateLeaveOrMission() && UntilDateLeaveOrMission()) {
const diff = calculateDateDiff();
if (diff === -1) {
$("#show-date-diff").val(`تاریخ نامعتبر است`);
} else {
$("#show-date-diff").val(`${diff} روز`);
// $('#show-date-diff').html(`${diff} روز`);
}
}
}
```
**محاسبه اختلاف زمان دو فیلد و نمایش آن در فیلد html :**
ابتدا در یک تابع اختلاف زمان را محاسبه می کنیم و سپس در تابع دیگر مقدار محاسبه شده را نمایش می دهیم
```js
function calculateTimeDiff() {
const fromTime = moment(FromTimeLeaveOrMission(), 'hh:mm');
const untilTime = moment(UntilTimeLeaveOrMission(), 'hh:mm');
if (fromTime.unix() > untilTime.unix()) return -1;
const duration = moment.duration(untilTime.diff(fromTime));
return moment(`${duration.hours()}:${duration.minutes()}`, 'h:m').format('hh:mm');
}
function showTimeDiff() {
debugger;
if (FromTimeLeaveOrMission() && UntilTimeLeaveOrMission()) {
const diffTime = calculateTimeDiff();
if (diffTime === -1) {
$("#show-time-diff").val(`ساعت های انتخاب شده نا معنبر است`);
}
else {
$("#show-time-diff").val(`${diffTime}`)
}
}
}
```
**محاسبه اختلاف دو تاریخ :**
با استفاده از یک تابع اختلاف دو تاریخ را محسابه می کنیم و در صورتی که تاریخ وارد شده اول بزرگ تر از تاریخ وارد شده دومی باشد پیغام خطا می دهد
سپس در تابع دوم اختلاف تاریخ را نمایش می دهیم
```js
function calculateDateDiff() {
const from = moment(FromDateLeaveOrMission(), "jYYYY/jMM/jDD");
const to = moment(UntilDateLeaveOrMission(), "jYYYY/jMM/jDD");
if (from.unix() > to.unix()) {
return -1; // invalid dates;
}
return to.diff(from, "days") + 1;
}
function showDateDiff() {
if (FromDateLeaveOrMission() && UntilDateLeaveOrMission()) {
const diff = calculateDateDiff();
if (diff === -1) {
$("#show-date-diff").val(`تاریخ نامعتبر است`);
} else {
$("#show-date-diff").val(`${diff} روز`);
// $('#show-date-diff').html(`${diff} روز`);
}
}
}
```
**محاسبه اختلاف زمان دو فیلد و نمایش آن در فیلد html :**
ابتدا در یک تابع اختلاف زمان را محاسبه می کنیم و سپس در تابع دیگر مقدار محاسبه شده را نمایش می دهیم
```js
function calculateTimeDiff() {
const fromTime = moment(FromTimeLeaveOrMission(), 'hh:mm');
const untilTime = moment(UntilTimeLeaveOrMission(), 'hh:mm');
if (fromTime.unix() > untilTime.unix()) return -1;
const duration = moment.duration(untilTime.diff(fromTime));
return moment(`${duration.hours()}:${duration.minutes()}`, 'h:m').format('hh:mm');
}
function showTimeDiff() {
debugger;
if (FromTimeLeaveOrMission() && UntilTimeLeaveOrMission()) {
const diffTime = calculateTimeDiff();
if (diffTime === -1) {
$("#show-time-diff").val(`ساعت های انتخاب شده نا معنبر است`);
}
else {
$("#show-time-diff").val(`${diffTime}`)
}
}
}
```
در این مثال در داشبود اصلی بخشی قرار داده شده است که صفحه پویا می باشد و با استفاده از javaScript و html می توان دکمه هایی در آن طراحی کرد که با کلیک بر روی آن ها می توان فرایند را شروع کرد
```js
prosses = function (IdProsses) {
absoluteMethodHelper.runProcess(1, null, curentRoleId, curentUserId, null, [{"name": "LeaveOrMissionVar","value": IdProsses}], null, runType = RunProcessType.messageEventStart).then(result => {
new serviceManager().formView(result.content.Content.TaskElementResult.ProcessFlowModel, result.content.Content.TaskElementResult.ReferenceID, result.content.Content.ProcessCreationID);
}).catch(error => {
console.log(error)
});
}
```
در این مثال کاربر ابتدا کد ملی را در فیلد وارد می کند و پس از اینکه بر روی فیلد دیگری کلیک کند بررسی تکراری بودن انجام می شود
```js
export const onLoad = function (viewModel) {
viewModel.fields.EditInsertUser.UseMeliCode_Instance.option("onFocusOut", () => {
const NationalCode = viewModel.fields.EditInsertUser.UseMeliCodeConfig.value(); // دسترسی به مقدار وارد شده
if (!NationalCode) return;
loadPanel.indicatorShow();
const ProviderId = 119;
const Parameters = [{ name: "MeliCode", value: NationalCode }];
absoluteMethodHelper.runProvider(ProviderId, Parameters)
.then(res => {
const receive = JSON.parse(res.Content.providerResult)[0];
if (receive.Code == 1) {
const _Types = { e: "error", s: "success", w: "warning" }
toast.show(_Types.w, "کد ملی وارد شده تکراری است") // نمایش پیغام خطا
viewModel.EditInsertUser_Record().UseMeliCode(null) // خالی کردن فیلد
}
loadPanel.indicatorHide();
})
.catch(() => loadPanel.indicatorHide())
});
}
```
پس از وارد کردن کد ملی تکراری فیلد خالی می شود و پیغام کد ملی وارد شده تکراری است نمایش داده می شود
```js
export const onLoad = function (viewModel) {
// نمونه کد سفارشی سازی آیتم های فیلد برای ستون
absoluteMethodHelper.runProvider(29, [
{ name: 'CompanyStatus', value: 1 }
]).then(e => {
// دریافت آیتم های مورد نظر برای فیلتر سازی آنها از Provider
const providerResult = JSON.parse(e.Content.providerResult);
// دریافت شیء ساخته شده دیتاگرید
const dataGrid = $('#grid_CompanyDetail').dxDataGrid('instance');
dataGrid.option('columns[1].calculateFilterExpression', function (filterValue, selectedFilterOperation) {
switch (filterValue) {
case 1: return true;
case 2: return providerResult.map(i => [this.dataField, '=', i.Id]).reduce((container, item, index) => {
container.push(item);
if (index !== providerResult.length - 1) container.push('or');
return container;
}, []);
case 3: return providerResult.map(i => [this.dataField, '<>', i.Id]).reduce((container, item, index) => {
container.push(item);
if (index !== providerResult.length - 1) container.push('and');
return container;
}, []);
default: return [this.dataField, '=', filterValue];
}
});
dataGrid.on('editorPreparing', function (e) {
// در اینجا آیتم های سفارشی خود را اضافه کرده ایم
// بعلاوه آن، آیتم هخای پرووایدر را هم اضافه کردیم تا کارب بتواند هرکدام را به دلخواه خود انتخاب کند
// کاربر میتواند 3 تا آیتم سیستمی را انتخاب کند یا از آیتم های پچرووایدر انتخاب کند
if (e.editorOptions.searchExpr === 'NameCompany') {
const dataSource = [
{ filterValue: 1, filterText: "(همه)" },
{ filterValue: 2, filterText: "(دارای مقدار)" },
{ filterValue: 3, filterText: "(بدون مقدار)" },
...providerResult.map(i => ({
filterValue: i.Id, filterText: i.NameCompany
}))
];
e.editorOptions.valueExpr = "filterValue";
e.editorOptions.displayExpr = "filterText";
e.editorOptions.dataSource = dataSource;
e.editorOptions.onOptionChanged = function (e) {
if (e.name === 'dataSource' && !Array.isArray(e.value)) {
e.component.option('dataSource', dataSource);
}
};
e.editorOptions.oninitialized = function (event) {
event.component.option('value', 2);
}
}
});
dataGrid.repaint();
loadPanel.indicatorHide();
}).catch(loadPanel.indicatorHide);
}
// نمونه کد سفارشی سازی سلکت باکس فیلتر ستون دیتاگرید.txt
// Displaying نمونه کد سفارشی سازی سلکت باکس فیلتر ستون دیتاگرید.txt.
```
```js
$('codemeli').dxNumberBox(); //ایجاد فیلد عددی
$('#FName').dxTextBox(); // ایجاد فیلد متنی
$('#LName').dxTextBox(); // ایجاد فیلد متنی
$(document).on('click', '#btnio', function () {
const CodeMeli = $('#codemeli').dxNumberBox('instance').option('value'); // خواندن مقدار درون فیلد
const FirstName = $('#FName').dxTextBox('instance').option('value');
const LastName = $('#LName').dxTextBox('instance').option('value');
absoluteMethodHelper.runProvider(5763, [
{ name: "CodeMeli", value: CodeMeli }, // مقدار دادن به پارامتر های منبع داده
{ name: "FirstName", value: FirstName },
{ name: "LastName", value: LastName }
]).then(res => {
if(res.HasError) {
toast.showResult(res);
return;
}
const Id = JSON.parse(res.Content.providerResult)[0];
console.log(Id);
var x = deferredManagementJson.then(pageKeys => { })
//نمایش گزارش
var paramList = [
{ ResourceId: 1, Parameters: [{ Name: 'recordId', Value: Id }] }, // مقداردهی به پارامتر های گزارش
{ ResourceId: 2, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 3, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 4, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 5, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 6, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 7, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 8, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 9, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 10, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 11, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 12, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 13, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 14, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 15, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 1224, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 1226, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 1229, Parameters: [{ Name: 'recordId', Value: Id }] },
{ ResourceId: 16, Parameters: [{ Name: 'recordId', Value: Id }]
}];
absoluteMethodHelper.generateStimulExport(5, paramList, 'pdf', true); // فراخوانی گزارش با خروجی با نوع خروجی
////لودینگ
// loadPanel.indicatorHide();
})
});
```
```js
absoluteMethodHelper.openReport(
YOUR_OWN_REPORT_ID,// شناسه گزارش
// مقداردهی پیش فرض به پارامتر ها
// *** اختیاری ***
[
{
Params: [
{
Name: PARAM_NAME,
Value: PARAM_VALUE
},
//...
],
ResourceId: RESOURCE_ID,
ResourceName: RESOURCE_NAME
},
//...
]
)
```
```js
absoluteMethodHelper.openReport(
YOUR_OWN_REPORT_ID,// شناسه گزارش
// مقداردهی پیش فرض به پارامتر ها
// *** اختیاری ***
[
{
Params: [
{
Name: PARAM_NAME,
Value: PARAM_VALUE
},
//...
],
ResourceId: RESOURCE_ID,
ResourceName: RESOURCE_NAME
},
//...
]
)
// مثال استفاده:
absoluteMethodHelper.openReport(1033);
// کد بالا گزارش با شناسه ی 1033 را باز میکند.
// چون هیچ پارامتر پیش فرضی برای آن تنظیبم نشده پارامتر ها به صورت دستی توسط کاربر وارد میشوند
///////////////////////////////////////
absoluteMethodHelper.openReport(1033, [
{
Params: [
{
Name: "NCode",
Value: '0946620903'
},
],
ResourceId: 1036,
ResourceName: 'testest'
}
]);
// کد بالا گزارش با شناسه 1033 باز میکند.
// چون که برای پارامتر NCode مقدار تنظیم شده مستقیما گزارش نمایش داده خواهد شد
```
```js
const toolbar = $('#grid_SubFormName .dx-datagrid-header-panel > .dx-toolbar').dxToolbar('instance'); // SubFormName نام تو در تو می باشد
const toolbarItems = toolbar.option('items');
const openPopupButton = toolbarItems.find(item => item.options.icon === 'plus');
if(openPopupButton) {
const superOnClick = openPopupButton.options.onClick;
openPopupButton.options.onClick = function(...e) {
superOnClick(...e);
const VM = getViewModel(); // --> viewModel here
const lastRecord = VM.SubFormName_List().at(-1); // SubFormName نام تو در تو می باشد
if(lastRecord) VM.SubFormName_Record().FieldName(lastRecord.FieldName()); // FieldName نام فیلد می باشد
}
}
toolbar.option('items', toolbarItems);
```
روش های کار با خروجی عکس
روش های کار با خروجی عکس
## روش اول
در این روش می توانیم از html render در فیلد انتخابی استفاده کنیم و تصاویر را در ستون های خروجی پروایدر در فیلد انتخابی به نمایش بگذاریم
برای این کار باید خروجی مبنع داده خود را به نوعی تنظیم کرد که خروجی برای ما آدرس تصویر باشد و در تنظیمات اختصاصی قابلیت html render را فعال می کنیم که خروجی ادرس تصویر ما به تصویر تبدیل شود
```js
Select GB_uploadImageForm.Id,
Concat('/archive/GetFileAnonymous?id=',
SubString(GB_uploadImageForm.PhotoUpload, CharIndex('ArchiveCode="',
GB_uploadImageForm.PhotoUpload) + Len('ArchiveCode="'), CharIndex('" Kind="1',
GB_uploadImageForm.PhotoUpload) - (CharIndex('ArchiveCode="',
GB_uploadImageForm.PhotoUpload) + Len('ArchiveCode="')))) As
'ImageArchiveUrl',
GB_uploadImageForm.PhotoName
From GB_uploadImageFo
```
نمونه کد بالا برای ساخت ادرس تصاویر ساخته شده است
## روش دوم
روش دیگر استفاده از دکمه دانلود برای دانلود تصویر انتخاب شده می باشد
در این روش هم شما نیاز دارید که همانند روش بالا ادرس نصویر خود را از منبع داده خورجی بگیرید و با این تفاوت که ادرس تولید شده توسط مبنع داده به دکمه متصل می شود ک برای ساخت دکمه می تواند از فیلد html استفاده کرد و در آن جا یک button ساخت و ادرس button را به صورت پویا از منبع داده و مورد انتخاب شده در فیلد سلکتیو دریافت کرد
```js
viewModel.fields.secondSelectImage_Instance.option('onValueChanged', function (event) {
$('#secondDownloadImage a').attr('href', event.value);
$('#secondDownloadImage h4').text(event.component.option('selectedItem').PhotoName);
});
$('#secondDownloadImage button').on('click', function (event) {
if ($('#secondDownloadImage a').attr('href')) {
var link = document.createElement('a');
link.href = $('#secondDownloadImage a').attr('href');
link.download = 'image_' + Math.random() + '.jpg';
link.click();
}
});
```
در کد بالا آدرس عکس با توجه به ردیف انتخاب شده در فیلد انتخابی به فیلد دکمه ارسال می شود و با کلیک کردن بر روی دکمه دانلود نصویر ، تصویر انتخاب شده در فیلد انتخابی دانلود می شود
## روش سوم
در این علاوه بر اینکه همانند روش اول می توانید تصاویر را مشاهده کنید می توانید
تصاویر را به صورت بزرگ مشاهده و یا آن ها را دانلود کنید
همانطور که قبل تر گفته شد در فیلد انتخابی شما می توانید از html render برای تنظیم خروجی منبع داده و مقدار نمایشی استفاده کنید
برای داشتن دکمه های نمایش تصویر و دانلود تصویر شما می توانید در تنظیمات قالب نمایشی با استفاده از کد های html دکمه مورد نظر خود را بسازید و آدرس دتلود و نمایش تصاویر را از مبنع داده بگیرید
همانططور که در تصویر بالا مشاهده می کنید دو ستون متتاطر برای داده های خروجی منبع داده با قالب html ساخته شده و در نهایت با html render خروجی گرفته می شود و در هر ردیف این دو دکمه با مقدا آدرس تصویر برای دکمه ها نمایش داده می شود
## روش چهارم
در این روش عکس انتخاب شده در در فیلد انتخابی در فیلد فایل آپلود نمایش داده می شود
برای دریافت عکس از فایل آپلود لازم است custom js استفاده کرده و فایل آپلود را به صورت js با استفاده از خروجی منبع داده مقدار دهی کنیم
```js
viewModel.fields.fourthSelectImage_Instance.option('onValueChanged', function (event) {
if (event.value) {
// اگر مقدار داشت
var queryParams = new URLSearchParams(event.value.substring(event.value.indexOf('?') + 1));
var id = queryParams.get('id');
if (!viewModel.data().uploadFourthDistrict) {
viewModel.data().uploadFourthDistrict = ko.observableArray();
}
// نوع فایل مورد نظر از این قسمت انتخاب شود
const KindFile = {
Image: 1,
Video: 2,
Audio: 3,
File: 4,
};
viewModel.data().uploadFourthDistrict([
{
Kind: KindFile.Image,
ArchiveCode: id,
IsDeleted: false,
},
]);
$('.uploaded-count-number').text(1);
} else {
// اگر خالی بود
viewModel.data().uploadFourthDistrict = undefined;
$('.uploaded-count-number').text(0);
}
});
```
در این مثال رنگ سطر های تو در تو را بر اساس فیلد انتخابی مشخص می کنیم
با این تفاوت که در این فیلد انتخابی منبع داده ما دارای ۳ خروجی متن و شناسه و کد رنگ می باشد که کد رنگ در فیلد انتخابی استفاده نشده اما در منبع داده ما وجود دارد
```js
$("#grid_FollowUpResultDetails").dxDataGrid({ // FollowUpResultDetails : نام فیلد تو در تو
onRowPrepared:function(e){
if (e.rowType === "data") {
let operationId = e.data.FK_OperationId() // شناسه فیلد انتخابی درون رکورد تو در تو
let operationItem = viewModel.fields.FollowUpResultDetails.FK_OperationId_Instance.option('items') // دریافت آیتم های فیلد انتخابی
for (let index = 0; index < operationItem.length; index++) {
if(operationItem[index].Id === operationId){ // در این قسمت از کد ما داده های فیلد انتخابی با با شناسه انتخاب شده در رکورد تو در تو مقایسه می کنیم و مقدار رنگ را از داده های فیلد انتخابی بر می داریم
let color = operationItem[index].ColorField // دریافت رنگ از منبع داده فیلد انتخابی بر اساس رکورد
e.rowElement.css({ "background-color":color , "color":"black"}); // تنظیم رنگ برای رکورد تو در تو
}
}
}
}})
```