关于jq+devexpress基础知识总结（随便的基础）

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

        },




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

<div data-bind="dxSelectBox: SCYselectbox" class="dx-lookup-invalid" style="width:50%"></div>
    
    
    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,
    }



//-----------------------2016年12月12----------------------------------

1、html页面中div写了data-bind=“文本类型：取的名字”的话，在js中就要定义初始化   --->取的名字：ko.observable（0）/ko.observable（“”）/ko.observable([])

2、有时html页面中可直接绑定数据源中的字段，直接显示（例：采购录入中的添加采购计划显示的库存数量及价格等等）格式： data-bind="text: $data.GOODSNAME"

3、按钮的另一种写法： <div data-bind="dxButton: {
                                                 text: '加入预选计划',
                                                 type:'success',
                                                 onClick: $parent.addplane,
                                                 disabled:!$parent.BuyNumber.value(),
                                                 },
                         visible:$data.GENQTY">
               </div>
                       <div data-bind="dxButton: {
                                                   text: '关闭商品详情',
                                                   type:'normal',
                                                   onClick: $parent.colsegoodsinfo,
                                                   }">
                </div>