[입자 귀 창] (1) jQuery easyui datagrid 데이터 로드

사실 easyuidatagrid 로 딩 데 이 터 는 두 가지 방식 만 있 습 니 다. 하 나 는 ajax 로 목표 url 을 불 러 온 json 데이터 입 니 다.다른 하 나 는 js 대상 을 불 러 오 는 것 입 니 다. 즉, loadDate 방법 을 사용 합 니 다. 이 방법 은 로 컬 js 데이터 (url 호출 이 아 닌) 를 불 러 오 는 데 사 용 됩 니 다.프로젝트 에서 내 가 사용 하 는 것 과 다른 사람의 코드 를 연구 하 는 데 사용 하 는 것 은 보편적으로 첫 번 째 이 고 다음은 그들 을 정리 하 는 것 이다.
     1. ajax 대상 url 에서 돌아 오 는 json 데 이 터 를 불 러 옵 니 다.
      우선, ajax 를 통 해 목표 url 을 불 러 오 는 값 이 꼭 json 형식 은 아 닙 니 다.http://blog.csdn.net/luckystar689/article/details/51107388 이 글 에서 건물 주 는 MVC 의 전송 값 이 View 로 돌아 가 는 집중 데이터 형식 을 소개 했다. 이 블 로그 에 대한 사 고 는 드 롭 다운 상자, 표, text 상자 에 대해 우리 가 어떤 유형의 데 이 터 를 전달 해 야 하 는 지 정리 했다.datagrid 에 대해 서 는 json 으로 반환 값 을 전달 하 는 것 을 선택 합 니 다.
        형식 1:

<span style="font-family:Microsoft YaHei;font-size:14px;">function SelectSubsidiary() {
    //    
    var CadresType = $('#DictionaryName12').combobox('getText');
    //      
    var SubsidiaryName = $('#UnitName1234').combobox('getText');

    $('#dg').datagrid({
        url: '/CadresBasicInfo/SelectSubsidiaryName?CadresType=' + CadresType + '&SubsidiaryName =' + SubsidiaryName
    });
    //    
    $("#dg").datagrid("reload");
}
</span>

       이 형식 은 JQuery EasyUI 의 datagrid 방법 을 통 해 직접 값 을 전달 합 니 다. url 에서 여러 개의 인 자 를 전달 할 때 따옴표 안에 빈 칸 이 있어 서 는 안 됩 니 다. 이렇게:

<span style="font-family:Microsoft YaHei;font-size:14px;">        url: '/CadresBasicInfo/SelectSubsidiaryName?CadresType=' + CadresType + '&SubsidiaryName =' + SubsidiaryName
</span>

       Controller 에서 우리 가 쓴 View 를 받 아들 이 는 코드 는 다음 과 같 습 니 다.

<span style="font-family:Microsoft YaHei;font-size:14px;"> string SubsidiaryName = Request["SubsidiaryName"];</span>

       여기 서 문제 가 발생 할 수 있 습 니 다. 저 는 값 을 전달 할 때 코드 규범 에서 '=' 의 양측 에 빈 칸 이 있어 야 한 다 는 것 을 알 게 되 었 습 니 다. 그러나 실제 Controller 에 올 라 온 변 수 는 'Subsidiary Name' 입 니 다. 빈 칸 이 하나 더 있어 서 여러 개의 인 자 를 전달 할 때 Controller 에서 하나의 값 만 받 을 수 있 습 니 다. 이런 방식 은 조심해 야 합 니 다.
      형식 2:

<span style="font-family:Microsoft YaHei;font-size:14px;">  $.post("/CadresBasicInfo/EditCadresBasicInfo",
         {
             "sex": sex, "dictionaryname": dictionaryname, "education": education, "principle": principle, "id": id, "name": name, "position": position, "workexperience": workexperience, "birthday": birthday, "worktime": worktime, "partytime": partytime, "tel": tel
         },

        function (result) {

            if (result) {
                $.messager.alert('    ', '           ！', 'info')
                $("#editCadresBasicWindow").window("close");
                $("#dg").datagrid("reload");
            } else {

                $.messager.alert('    ', '           ！', 'warning')
            }
        })
</span>

      js 에 서 는 ajax 방법 을 사용 하여 주소 (/ controllor / action) 를 통 해 post 또는 get 요청 을 보 내 고 주소 에 대응 하 는 control 의 한 action 을 실행 할 수 있 습 니 다.이 때 여러 개의 인 자 를 전달 합 니 다. {"param 1": A, "param 2": B} 방식 은 형식 1 url 의 전 참 방식 에 비해 형식 이 합 리 적 이 고 오류 확률 도 낮 습 니 다.
      Controller 의 반환 값 에 대한 처 리 는 result 의 진 위 를 판단 하 는 방법 외 에 success, complete, failed 를 써 서 판단 할 수 있 습 니 다.
       
       2. loadDate 방법 
      이 방법 은 datagrid 표 로 불 러 오 는 확장 으로 시험 시스템 코드 에 유용 합 니 다.

<span style="font-family:Microsoft YaHei;font-size:14px;">function doSearch(value) {
    var flag=(value != "");
    if (flag) {
        var grid = $('#dg');
        var options = grid.datagrid('getPager').data("pagination").options;
        var curr = options.pageNumber;
        var pageSize = options.pageSize;
        $.ajax({
            type: "POST", //          POST GET
            async: false,
            url: "/QuestionType/FuzzyQueryQuestionType",  //  url   url    
            data: { "SearchContent": value, "pageSize": pageSize, "pageIndex": curr },
            success: function (data) {
                var jsondata = eval(data);
                //var jsData = (new Function("", "return " + data))();
                $('#dg').datagrid('loadData', data);
            }
        });
        return;
    }</span>

      분명히 $('\ # dg'). datagrid ('loadDate', date) 라 는 문장의 date 는 date: {'Search Content': value, 'pageSize': pageSize} 에서 json 문자열 로 규정 되 어 있 기 때문에 LoadDate 방법 은 로 컬 js 의 데이터 만 불 러 오고 최종 적 으로 불 러 온 data 값 은 json 문자열 이 아 닌 json 대상 으로 변환 해 야 합 니 다.

<span style="font-family:Microsoft YaHei;font-size:14px;">var data = '{"total":1,"rows":[{"id":"001","name":"Vincent","role":"   "}]}';  
data = JSON.parse(data);//   json  
$('#dg').datagrid('loadData', data); </span>

     
이로써 MVC 를 응용 한 후 데이터 grid 에 대한 데 이 터 를 불 러 옵 니 다. 현재 프로젝트 의 응용 은 이 정도 입 니 다.