js+html5 +devexpress属性总结

2023-08-28 18:26:16

//获取某行某列的值
onSelectionChanged: function (selectedItems) {
var data = selectedItems.selectedRowsData[0];
if (data != null)
postionno = data.POSTIONNO; //货位号

//获取月份的下拉列表dxSelectBox

SCYselectbox: {
items: ko.observable([]),
value: ko.observable(""),
onValueChanged: function (data) {
getlist(data.value);
}
}

//绑定月份
function getlist2() {

var myDate = new Date()
var s_yeay = myDate.getFullYear();
var yearitem = [
s_yeay + "-01",
s_yeay + "-02",
s_yeay + "-03",
s_yeay + "-04",
s_yeay + "-05",
s_yeay + "-06",
s_yeay + "-07",
s_yeay + "-08",
s_yeay + "-09",
s_yeay + "-10",
s_yeay + "-11",
s_yeay + "-12"
];
viewStockCount.SCYselectbox.items(yearitem); //将值填充到selectbox控件中
viewStockCount.SCYselectbox.value(yearitem[0]); //默认选择第一个
getlist(viewStockCount.SCYselectbox.value()); //取值
};

//给grid中的列绑定下拉列表
var depData = ko.observable([]); //获取仓库下拉列表
{
dataField: 'GENSTORAGEID',
caption: '仓库名称',
allowSearch: true,
dataType: 'string',
visible: false,
allowEditing: true,
alignment: 'center',
editCellTemplate: function ($cell, cellData) {
var $selectBox = $("<div>").dxLookup({
dataSource: depData(),
displayExpr: 'GENSTORAGENAME',
valueExpr: 'GENSTORAGEID',
searchPlaceholder: '请输入...',
cancelButtonText: '取消',
value: cellData.data.GENSTORAGEID,
onValueChanged: function (e) {
//console.log(e.value);
GENSTORAGEID(e.value);
}
});
$cell.append($selectBox);
}

}

//----------获取仓库列表
function getgenername() {
var _peoid = decrypt(localStorage.getItem("_ur"));
DBRequest("Api/Func.asmx/Getgenernamelist", "{ peoid:" + _peoid + "}",passfunc3, failfunc);
};

//查询成功后异步事件 ------入库复核
function passfunc3(data) {
depData(data);
console.log(depData());
};

//给grid列的单价、金额加美元符号
{
dataField: 'AMONEY',
caption: '金额',
allowSearch: true,
allowEditing: false,
dataType: 'string',
alignment: 'center',
format: { type: 'currency', precision: 2 } //给grid列的单价、金额加美元符号
},

//
{
dataField: 'ISVALID',
dataType: 'number',
caption: '是否有效',
alignment: 'center',
width: 'auto',
lookup: {
dataSource: [
{ value: 1, content: '是' },
{ value: 0, content: '否' }
], valueExpr: 'value', displayExpr: 'content'
}
}

//类型
dataType alignment
'number' 'right'
'boolean' 'center'
'string' 'left'
'date' 'left'
'guid' 'left'

//初始化grid宽度
customizeColumns: function (columns) {
columns[0].width = 100;
columns[1].width = 210;
}

//grid验证
{
dataField: "Phone",
validationRules: [{ type: "required" }, {
type: "pattern",
message: 'Your phone must have "(555) 555-5555" format!',
pattern: /^$\d{3}$\ \d{3}-\d{4}$/i
}]
},

{
dataField: "Email",
validationRules: [{ type: "required" }, { type: "email" }]
}

//自定义列拼接成列（由几个字段组成）
{
caption: "Employee",
width: 230,
fixed: true,
calculateCellValue: function(data) {
return [data.Title,
data.FirstName, data.LastName]
.join(" ");
}
},

//grid绑定列图片
{
dataField: "Picture",
width: 100,
allowFiltering: false,
allowSorting: false,
cellTemplate: function (container, options) {
container.addClass("img-container");
$("<img />")
.attr("src", options.value)
.appendTo(container);
}
},

//grid刷新
$("#applyCustomFilter").dxButton({
text: "Calculate summary for selected rows",
onClick: function() {
dataGrid.refresh();
}
});

//grid滚动条属性（水平和垂直的都有）
fieldChooser: {
enabled: false
},
scrolling: {
mode: "virtual"
},

//只允许输入数字的texbox
<div class="dx-field">
<div class="dx-field-label">Default mode</div>
<div class="dx-field-value">
<div data-bind="dxNumberBox"></div> //这个就是的（没有上下的箭头）只能输入数字的
</div>
</div>

<div class="dx-field">
<div class="dx-field-label">With spin and clear buttons</div>
<div class="dx-field-value">
<div data-bind="dxNumberBox: withButtons"></div> //有上下箭头的，且输入的文本还可以关闭的 withButtons是自定义的名字，用来写js的
</div>
</div>

//js
withButtons: {
value: 20.5,
min:0,
max:3,
showSpinButtons: true,
showClearButton: true,
},

//----------------------动态设置最大值，最小值----------------------

<div class="dx-field-label">This month sales</div>
<div class="dx-field-value">
<div data-bind="dxNumberBox: salesOptions"></div>
</div>

var totalproductQuantity = 30,
salesValue = ko.observable(16),
stockValue = ko.observable(14);

salesOptions: {
max: totalproductQuantity,
min: 0,
value: salesValue,
showSpinButtons: true,
onValueChanged: function() {
stockValue(totalproductQuantity - salesValue());
}
},

//----------------------文本框的属性----------------------
readOnly: true, //只读
hoverStateEnabled: false //鼠标移上去的状态（false 无）
mode: "password", //密码类型
showClearButton: true //文本是否可有清除按钮
placeholder: "请输入文字" //文本提示
valueChangeEvent: "keyup",
disabled: true //整个文本框不可用，且无鼠标移上去的样式

//----------------------下拉文本框----------------------
<div class="dx-field-value">
<div data-bind="dxSelectBox: simple"></div>
</div>

属性：
displayExpr: "Name",
valueExpr: "ID",
value: products[3].ID, //products 为datatsouse的名字
openOnFieldClick: true, //点击文本框出现下拉列表
showDropButton: false, //是否显示下拉列表的那个三角形的箭头（false 不出现）

//此下拉列表可搜索，但下拉列表中没有的值，不会被查出，文本框也不会保留该不存在的值
searchOptions: {
items: products,
displayExpr: "Name",
valueExpr: "ID",
searchEnabled: true
},
//同上相反
fieldEditingOptions: {
items: simpleProducts,
value: currentProduct,
acceptCustomValue: true,
}

码农公寓

相关文章