jQuery EasyUI 使用笔记

大家有四次抢票机会。第一次是放票时间之后的30分钟。第二次机会是开车前的15天。第三个机会是开车前的48小时。第四个机会是开车前的24小时。

$("#gys_key").combogrid("getValue")

$('#dtpDate').datebox("getValue")

1.导入js

2.datagrid重新加载

3.弹出div,打开新页面

4.实现分页

5.双击

6.嵌套子表格

7.javascript刷新页面

导入JS,CSS
    <link href="Themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="Themes/default/easyui.su.css" rel="stylesheet" type="text/css" />
    <link href="Themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/JQuery.cookie.js" type="text/javascript"></script>
    <script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="Scripts/JQuery.easyui.utility.js" type="text/javascript"></script>
    <script src="Scripts/Login/JQuery.browser.js" type="text/javascript"></script>
    <script src="Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script>
<%--    <script src="Scripts/print_btn.js" type="text/javascript"></script>
    <script src="Scripts/CommonFn.js" type="text/javascript"></script>--%>
    <script src="Scripts/datagrid-detailview.js" type="text/javascript"></script>
    <script src="Scripts/ajaxupload.3.5.js?v=1.1" type="text/javascript"></script>

--datagrid修改数量,uppnumber()要定义在.aspx文件里面
                    { field: "qty", title: '数量', width: undefined, align: 'center', sortable: true, formatter: function (value, row, index) {
                        if (row.gi_code != "页合计" && row.gi_code != "总合计") {
                            return '<input name="pnumber" dno="' + row.DNO + '"   value="' + value + '" type="text" style="width:78px;" class="easyui-numberbox" onChange="uppnumber(this.value,' + row.DNO + ')"/>';
                        }
                        else {
                            return value;
                        }
                    }
                    },

//修改数量
        function uppnumber(qty, id) {
            
            if (qty > 0) {
                $.ajax({
                    url: url + "?action=pnumber",
                    type: "post",
                    data: { qty: qty, dno: id },
                    success: function (msg) {
                        //infoalert(msg);
                        $("#tb_PODetail").datagrid("reload"); //可以注释
                    }
                });
            }
            else {
                $(this).val("")
                alert("采购数量要大于0!");
            }
        }

datagrid 重新加载 ?

// 加载，分页时会从第1页开始
$('#dg').datagrid('load', {
    code: '01',
    name: 'name01'
});
// 重新加载，分页时加载当前页数据，你要的刷新，应该是用这个，如果只是刷新，不需要参数，可以直接使用  $('#dg').datagrid('reload');
$('#dg').datagrid('reload', {
    code: '01',
    name: 'name01'
});

弹出div $("#div_Search").dialog("open");

打开页面 openModalDialog("GoodsEdit.aspx?code=" + row.code);

分页   Request.Form["page"]

Request.Form["rows"]

int start = ((Convert.ToInt32(Request.Form["page"].ToString().Trim()) - 1) * Convert.ToInt32(Request.Form["rows"].ToString().Trim())) + 1;

int end = (Convert.ToInt32(Request.Form["page"].ToString().Trim()) - 1) * Convert.ToInt32(Request.Form["rows"].ToString().Trim()) + Convert.ToInt32(Request.Form["rows"].ToString().Trim());

sql = "select * from( " + sql + ") as a where a.Ron between " + start + " and  " + end;

返回json

//1 result2 = "{\"total\":" + "200" + ",\"rows\":" + result + "}"; total 总行数,rows 显示的row

//2 json += ",\"pagetotal\":\"" + dt.Rows.Count + "\",\"skucount\":\"" + dt2.Rows.Count + "\",\"skutotal\":\"" + itotal + "\"" + "}"; 自定义右下角显示的数据

//1 双击row

onDblClickRow: function (rowIndex, rowData) {

var row = $("#tb_GoodsList").datagrid("getSelected");

if (row != undefined) {

<%if(Otype=="1"){ %>

window.returnValue = row;

window.close();

<%}else{ %>

openModalDialog("GoodsEdit.aspx?" + "id=" + row.gi_id + "&tt=1");

$("#dg_GoodsList").datagrid('reload');

<%} %>

}

}

//2  嵌套datagrid

view: detailview,

detailFormatter: function(index, row){

return '<div style="padding:2px"><table id="ddv-' + index + '"></table></div>';

},

onExpandRow: function(index, row){

$('#ddv-'+index).datagrid({

url: url + "?action=detaillist&oid=" +row.pc_id,//后台Request["oid"]

fitColumns: false,

pagination: true,

pageSize: 15,

pageList: [15, 30, 90, 120],

showFooter: true,

striped: true,

rownumbers: true,

singleSelect: true,

autoRowHeight: true,

loadMsg:'',

height:'auto',

columns:[[

{ field: "pi_id", title: "id", hidden: true },

{ field: "gi_code", title: "商品编码", width: undefined, align: 'center' },

{ field: "gi_shortname", title: '商品简称', width: undefined, align: 'center' },

{ field: "gs_name", title: '规格', width: undefined, align: 'center' },

{ field: "gi_unit", title: '单位', width: undefined, align: 'center' ,sortable:true},

{ field: "gi_importprices", title: '销售价', width: undefined, align: 'center' ,sortable:true},

{ field: "pi_kc", title: '库存数量', width: undefined, align: 'center' },

//                    { field: "pi_jbkc", title: '警戒库存', width: undefined, align: 'center' },

{ field: "pi_number", title: '采购数量', width: undefined, align: 'center'},

{ field: "pi_price", title: '采购单价', width: undefined, align: 'center'},

{ field: "pi_allmoney", title: '总价', width: undefined, align: 'center'},

]],

onResize:function(){

$('#west_dg').datagrid('fixDetailRowHeight',index);

},

onLoadSuccess:function(){

setTimeout(function(){

$('#west_dg').datagrid('fixDetailRowHeight',index);

},0);

}

});

$('#west_dg').datagrid('fixDetailRowHeight',index);

}

1、使用这个subGrid的视图，需要使用到官网提供的datagrid-detailview.js，其中帮我们定义好了detailView这种显示视图。

在使用过程中，我们只需要在主datagrid中将默认的view用detailView替换掉就可以了。

2、detailFormatter，也就是生成的detail中的初始代码，这里放入一个table，之后可以将其动态创建成datagrid。

3、当主datagrid刚刚初始化完成时，并不显示subGrid，此时subGrid并没有存在的必要，我们也不去创建它。

那什么时候去创建它呢？当我们展开主datagrid中的某条数据的时候，也就是在onExpandRow事件中，才去创建一个它“管辖”的subGrid。

4、创建subGrid的方法和一般创建datagrid的方式差不多，但是后面多了一些fixDetailRowHeight的操作

fixDetailRowHeight这个方法主要是为了调整subGrid的高度用的，如若不加，可能会造成subGrid的高度会出现错位的情况。

不过这里setTimeout的时间为0，那和直接调用function又有什么区别呢？

7.    function New2() {
        window.location.reload();//刷新页面
        //刷新页面，但是要手动清空
//        history.go(0);
//        $('#txtTax').val('');
//        $('#txtpay').val('');
//        $('#txtcurrency').val('');
//        $('#gys_key').combogrid.setValues('');
    }